随着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>
