当前位置：首页 > news >正文

Vue2 VS Vue3

news 2025/9/10 5:55:51

vue3

是的，Vue 3 确实取消了基于 JavaScript 原型的 Vue 和 VueComponent 构造函数（即你提到的 vm 和 vc），取而代之的是一种完全不同的、基于普通对象和代理（Proxy）的实例管理方式。

这是一个颠覆性的改变，它带来了更好的性能、更小的包体积和更灵活的 API 设计。

在这里插入图片描述

原生DOM事件自定义事件

# ==============  vue2 中  ==============
1. 原生DOM事件 放在在元素 是原生DOM事件 比如 <button @click='hander' />
2. 原生DOM事件 放在组件上 需要通过.native修饰符 变为原生DOM事件，否则是自定义事件 比如 <MyComponet @click.native='hander' />
<template><!-- 监听组件根元素的原生 click 事件 --><MyButton @click.native="handleNativeClick" /><!-- 监听子组件的自定义事件 --><MyButton @my-click="handleCustomClick" />
</template>通过this.$emit(事件类型，参数)  触发
通过this.$off('事件类型')  解绑# ==============  vue3 中  ==============
1. 原生DOM事件（单击、双击等），无论放在元素，还是 组件   ，都是原生DOM事件//  在子组件中  <script setup>中
通过defineEmits 编译器宏来获取   // 声明事件
let emit = defineEmits(['事件类型'])
emit('事件类型',..args)// 3.3+：另一种更简洁的语法
//来指定事件的类型和参数，这有助于提高代码的可维护性和类型安全性
const emit = defineEmits<{change: [id: number] // 具名元组语法update: [value: string]
}>()<template><!-- 因为 'click' 不是声明的自定义事件，所以会作为原生事件加到根元素上 --><MyButton @click="handleNativeClick" /><!-- 'my-click' 是声明的自定义事件，所以由子组件 emit 触发 --><MyButton @my-click="handleCustomClick" />
</template>
<script setup>
let emit = defineEmits(['my-click']); // 声明后，@click 就是自定义事件 
</script>

在这里插入图片描述

vue2 全局事件总线 vue3 mitt 》》兄弟间组件、任意组件之间通信

vue2 全局事件总线

在这里插入图片描述

//1、安装 mitt 是第三方的 npm i mitt 
//2、创建 事件总线
// 文件位置：src/utils/eventBus.js
// 导入 mitt
import mitt from 'mitt';// 创建 mitt 实例
const emitter = mitt();// 导出该实例，以便在其它组件中使用
export default emitter;

》》发送方

<template><button @click="sendMessage">发送消息给 ComponentB</button>
</template><script setup>
// 导入我们创建的事件总线实例
import emitter from '@/utils/eventBus';const sendMessage = () => {// 使用 emit 触发一个名为 'message-from-a' 的事件，并附带数据emitter.emit('message-from-a', {text: '你好，这是来自 ComponentA 的消息！',timestamp: new Date()});console.log('消息已发送！');
};
</script>

》》接收方

<template><div><h3>收到消息：</h3><p v-if="receivedMessage">{{ receivedMessage }}</p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 导入事件总线
import emitter from '@/utils/eventBus';const receivedMessage = ref(null);// 定义处理事件的函数
const handleMessage = (data) => {receivedMessage.value = `${data.text} (发送时间: ${data.timestamp.toLocaleTimeString()})`;
};// 在组件挂载时开始监听事件
onMounted(() => {emitter.on('message-from-a', handleMessage);
});// !!! 非常重要：在组件卸载时移除监听器，防止内存泄漏
onUnmounted(() => {emitter.off('message-from-a', handleMessage);
});
</script>