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>