1. 響應式系統原理

• Vue 2：利用Object.defineProperty()實現屬性攔截。存在局限性，無法自動監測對象屬性增減，需用Vue.set/delete；數組變異方法要重寫；深層對象遞歸轉換性能差。
• Vue 3：采用 ES6?Proxy代理對象，能直接攔截屬性訪問修改。無需特殊 API 就能監測屬性變化；數組操作攔截更自然；深層響應式惰性處理，提升性能。

  javascript

  // Vue 3響應式創建
  import { reactive } from 'vue';
  const state = reactive({ count: 0 });
  state.count = 1; // 修改觸發更新
  

2. 組件 API 風格

• Vue 2：以選項式 API 為主，通過data、methods、computed等選項組織代碼，大型組件易出現邏輯分散問題。
• Vue 3：主推組合式 API，使用setup()函數或<script setup>語法，邏輯可按功能拆分為獨立函數（如useFetchData()），解決代碼碎片化，提高復用與維護性。

  vue

  <script setup>
  import { ref, onMounted } from 'vue';
  const count = ref(0);
  const increment = () => count.value++;
  onMounted(() => console.log('Mounted'));
  </script>
  

3. 生命周期鉤子

• Vue 2：鉤子順序為beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed。
• Vue 3：保留多數鉤子但調整命名，beforeCreate與created整合到setup()，beforeDestroy改為beforeUnmount，destroyed改為unmounted。在組合式 API 中這樣使用：

  javascript

  import { onMounted, onBeforeUnmount } from 'vue';
  setup() {onMounted(() => { /* ... */ });onBeforeUnmount(() => { /* ... */ });
  }
  

4. 模板編譯優化

• Vue 2：模板編譯生成整體式渲染函數，更新時遍歷整個虛擬 DOM 樹，靜態節點也參與 diff 比較，影響性能。
• Vue 3：編譯時標記靜態節點（hoistStatic），避免重復創建比較；動態綁定屬性標記為PatchFlag，只對比變更部分。

  html

  <div><span>靜態文本</span> <!-- 靜態節點 --><span :class="active">動態文本</span> <!-- 僅對比class綁定 -->
  </div>
  

5. 虛擬 DOM 實現

• Vue 2：基于 JavaScript 對象，創建和 diff 算法簡單，性能受限。
• Vue 3：采用Proxy-based虛擬 DOM，減少內存占用；靜態提升復用靜態節點；雙端 diff 算法高效比較子節點列表，降低 DOM 操作次數。

6. 多根節點組件

• Vue 2：組件模板必須有單個根節點，否則報錯。
• Vue 3：支持多根節點（Fragment），無需額外包裹元素。

  vue

  <template><header>...</header><main>...</main><footer>...</footer>
  </template>
  

7. 其他特性

• TypeScript 支持：Vue 3 設計更適配 TypeScript，組合式 API 減少類型聲明冗余。
• 自定義渲染器：Vue 3 核心庫輕量，可通過@vue/runtime-core創建自定義渲染器（如渲染到 Canvas、WebGL）。
• Teleport（傳送門）：新增組件，支持將內容渲染到 DOM 其他位置（如模態框）。
• Suspense（異步組件）：原生支持異步組件與等待狀態，簡化異步加載邏輯。