Vue2 VS Vue3

vue3

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

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

原生DOM事件自定义事件

csharp 复制代码

# ==============  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 全局事件总线

typescript 复制代码

//1、安装 mitt 是第三方的 
    npm i mitt 
//2、创建 事件总线
// 文件位置：src/utils/eventBus.js
// 导入 mitt
import mitt from 'mitt';

// 创建 mitt 实例
const emitter = mitt();

// 导出该实例，以便在其它组件中使用
export default emitter;

》》发送方

vue 复制代码

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

》》接收方

vue 复制代码

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

vue3

原生DOM事件 自定义事件

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

原生DOM事件自定义事件