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

lang20150928

已于 2024-02-25 21:34:36 修改

阅读量958

点赞数 8

分类专栏：前端文章标签： vue.js javascript 前端

于 2024-02-25 21:10:38 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37607945/article/details/136287433

版权

前端专栏收录该内容

2 篇文章

订阅专栏

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