Vue3中的事件监听与处理机制深度解析

随着Vue3的发布，其在性能、灵活性和易用性上都实现了显著提升。其中，事件监听和处理机制作为Vue框架中的重要组成部分，也进行了相应的优化与升级。本文将深入探讨Vue3中如何进行事件监听与处理。

一、Vue3事件绑定

在Vue3中，我们依然使用v-on（简写为@）指令来监听并处理DOM事件。例如：

<template><button @click="handleClick">点击我</button>
</template><script setup>
import { ref } from 'vue';const handleClick = () => {console.log('按钮被点击了');
};
</script>

上述代码中，@click="handleClick"表示当按钮被点击时，会触发handleClick方法。这里引入了Vue3新的脚本编写模式——setup script，它使得逻辑更接近React Hooks的编程风格。

二、Vue3的事件处理函数

Vue3采用了Composition API，因此我们可以直接在setup函数内部定义并引用事件处理函数。此外，Vue3还支持响应式地更新事件处理器，这是Vue2所不具备的特性。

import { ref, onMounted, onUnmounted } from 'vue';let count = ref(0);function handleClick() {count.value++;
}onMounted(() => {document.getElementById('myButton').addEventListener('click', handleClick);
});onUnmounted(() => {document.getElementById('myButton').removeEventListener('click', handleClick);
});

在这个例子中，我们在组件挂载时添加事件监听器，在卸载时移除监听器，以避免内存泄漏。

三、Vue3的事件修饰符

Vue3保留了事件修饰符的功能，可以用来简化常见的DOM事件处理需求。例如.prevent阻止默认行为，.stop阻止事件冒泡等：

<button @click.prevent="handleClick">不会提交表单的按钮</button>

四、Vue3的自定义事件

Vue3同样支持组件间的自定义事件，通过emit方法触发，并在父组件中通过v-on或@来监听：

<!-- 子组件 -->
<template><button @click="emitCustomEvent">触发自定义事件</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['customEvent']);function emitCustomEvent() {emit('customEvent', '自定义参数');
}
</script><!-- 父组件 -->
<template><ChildComponent @customEvent="handleCustomEvent" />
</template><script setup>
function handleCustomEvent(param) {console.log('接收到的自定义事件参数：', param);
}
</script>

总结来说，Vue3在事件监听和处理方面延续了Vue2简洁易用的特点，同时借助Composition API提供了更大的灵活性和更好的性能表现。理解并掌握这一机制，有助于我们在开发过程中更好地利用Vue3的强大功能。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"></meta><meta name="viewport" content="width=device-width,initial-scale=1.0"></meta><title>Vue3 Demo</title><style></style><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="Application" style="text-align: center;"><div>单击次数:{{count}}</div><!--绑定一个简单的js语句--><button @click="this.count += 1">单击</button><!--绑定一个函数--><button @click="click(2)">单击</button><button @click="click(2,$event)">单击</button><!--进行多事件处理--><button @click="click(2),log($event)">单击</button><!--Dom事件的传递原理：在页面上触发一个单击事件时，事件首先会从父组件依次传递到子组件，这个过程称为捕获过程。当事件传递到最内层的子组件时，还会逆向再进行一次传递，从子组件一次向外进行传递，这个过程称为冒泡。Vue默认监听的Dom事件的冒泡阶段，如果需要监听捕获阶段，需要使用事件修饰符capture--><div @click="click1" style="border: solid red;">外层<div @click="click2" style="border: solid red;">中层<div @click="click3" style="border: solid red;">内层  <!--点击这一层 会显示 内层 中层 外层--></div></div></div><!--监听捕获阶段--><div @click.capture="click1" style="border: solid red;">外层<div @click.capture="click2" style="border: solid red;">中层<div @click.capture="click3" style="border: solid red;">内层   <!--点击这一层 会显示 外层 中层 内层--></div></div></div><!--使用stop可以阻止事件的传递--><div @click.stop="click1" style="border: solid red;">外层<div @click.stop="click2" style="border: solid red;">中层<div @click.stop="click3" style="border: solid red;">内层   <!--点击这一层 只会显示 内层--></div></div></div><!--常用的事件修饰符stop 阻止事件传递capture 监听捕获场景的事件once 只触发一次事件self 当事件对象的target属性是当前组件时才触发事件prevent 禁止默认的事件passive 不禁止默认的事件--><div style="border: solid;" @dbclick="dbclick">双击事件</div><input @focus="focus" @blur="blur" @change="change" @select="select"></input><div style="border: solid;" @mouseover="mouseover" @mouseout="mouseout">鼠标移入移出</div><input @keydown="keydown" @keyup="keyup"></input><!--用户按下Control键的时候并且按下了鼠标按键,才会触发事件--><div @mousedown.ctrl.exact="mousedown">鼠标按下</div><!--用户按下Alt键的同时,再按回车键,才会触发事件--><input @keyup.alt.enter="keyup"></input></div><script>const App = {data() {return {count: 0}},methods: {// 系统当前的Event对象click(step,event){this.count += step},// 第一个参数可以是系统事件log(event){console.log(event)},click1(){console.log("外层")},click2(){console.log("中层")},click3(){console.log("内层")},dbclick(){console.log("双击事件") },focus(){console.log("获取焦点") },blur(){console.log("失去焦点") },change(){console.log("内容改变")  },select(){console.log("文本选中")  },mouseover(){console.log("鼠标移入")  },mouseout(){console.log("鼠标移出")},mousedown(){console.log("鼠标按下")},keydown(){console.log("鼠标按键按下")},keyup(event){console.log("鼠标按键抬起" + event.key) }},computed: {},// 监听属性watch: {}}let instance = Vue.createApp(App).mount("#Application");</script>
</body></html>