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>
相关推荐
昔人'17 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
saadiya~1 天前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再1 天前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
瓜瓜怪兽亚1 天前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 天前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 天前
React组件完全指南
前端·javascript·react.js
EndingCoder1 天前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233401 天前
React Hooks完全指南
前端·javascript·react.js
Moment1 天前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html