1. 響應式原理：從「手動擋」到「自動擋」

• Vue2：
  使用 Object.defineProperty 監聽數據變化，但無法檢測新增屬性和數組索引修改，需要借助 Vue.set。

  // Vue2 中修改數組元素不會觸發視圖更新
  this.list[0] = '新值';         // ? 不生效
  this.$set(this.list, 0, '新值'); // ? 生效
  

• Vue3：
  使用 Proxy 實現響應式，自動支持所有數據變化類型。

  // Vue3 中直接修改即可
  list.value[0] = '新值'; // ? 自動觸發更新
  

比喻：
Vue2 像手動擋車，需要換擋（Vue.set）才能提速；Vue3 是自動擋，直接踩油門就能跑。

---

2. 代碼組織方式：從「分柜子」到「自由組合」

• Vue2（Options API）：
  需要將代碼拆分到 data、methods、computed 等選項中，邏輯分散。

  // Vue2：數據和方法分散
  export default {data() { return { count: 0 } },methods: { increment() { this.count++ } }
  }
  

• Vue3（Composition API）：
  使用 setup 函數，按邏輯功能組織代碼（類似 React Hooks）。

  // Vue3：相關邏輯寫在一起
  import { ref } from 'vue';
  export default {setup() {const count = ref(0);const increment = () => { count.value++ };return { count, increment };}
  }
  

比喻：
Vue2 像把衣服、褲子、襪子分開放不同抽屜；Vue3 像按季節搭配好套裝，方便取用。

---

3. 生命周期：名稱更直觀

功能	Vue2 鉤子	Vue3 鉤子
組件掛載前	beforeCreate	setup() 替代
組件掛載完成	mounted	onMounted
組件銷毀前	beforeDestroy	onBeforeUnmount
組件銷毀后	destroyed	onUnmounted

示例：

// Vue3 使用生命周期鉤子
import { onMounted } from 'vue';
export default {setup() {onMounted(() => {console.log('組件掛載完成！');});}
}

---

4. 性能優化：更快更輕量

• 打包體積：Vue3 核心庫比 Vue2 小 40%。
• 渲染速度：Vue3 的虛擬 DOM 算法優化，更新速度提升 100%。
• Tree-shaking：Vue3 支持按需引入功能，未使用的代碼不會打包進項目。

比喻：
Vue2 像裝滿工具的卡車，Vue3 像只帶必需工具的跑車，更快更靈活。

---

5. 新特性：解決痛點問題

多個根元素（Fragment）

<!-- Vue2：必須有單個根元素 -->
<template><div><h1>標題</h1><p>內容</p></div>
</template><!-- Vue3：允許多個根元素 -->
<template><h1>標題</h1><p>內容</p>
</template>

Teleport（傳送門）

將組件渲染到任意 DOM 節點（如全局彈窗）：

<template><teleport to="#modal-container"><div class="modal">我是一個彈窗</div></teleport>
</template>

---

總結：Vue2 vs Vue3 如何選擇？

• Vue2：適合維護舊項目或對兼容性要求高的場景。
• Vue3：推薦新項目使用，性能更好、代碼更靈活、生態完善（如 Pinia、Vite）。

升級建議：

• 小型項目：直接重寫為 Vue3。
• 大型項目：逐步遷移，使用 @vue/compat 兼容模式過渡。