一、Vue 3.4 核心特性概覽

Vue 3.4 代號「?? Slam Dunk」，帶來多項關鍵升級：

• 模板解析器性能翻倍：單文件組件（SFC）構建效率提升 44%，解析速度提升 2 倍。
• 響應式系統優化：計算屬性和 watchEffect 觸發更精準，減少無效渲染。
• Effect 作用域 API 穩定：通過 effectScope 和 onScopeDispose 實現副作用的細粒度管理，解決內存泄漏痛點。
• defineModel 宏成熟：簡化 v-model 組件開發，支持修飾符語法。

本文結合實戰案例，深度解析 Composition API 與 Effect 作用域 API，助你提升代碼組織能力與開發效率。

二、Composition API 核心能力實戰

2.1 響應式數據管理

基礎類型與復雜對象的選擇

• ref：用于基礎類型（如數字、字符串），返回帶 .value 的響應式引用：

  <script setup>  
  import { ref } from 'vue'  
  const count = ref(0) // 基礎類型響應式  
  </script>  
  

• reactive：用于對象/數組，返回響應式代理：

  <script setup>  
  import { reactive } from 'vue'  
  const state = reactive({ user: { name: 'Alice' }, todos: [] }) // 復雜數據響應式  
  </script>  
  

響應式解構：保持數據關聯

通過 toRefs 解構對象，避免失去響應式：

<script setup>  
import { reactive, toRefs } from 'vue'  
const state = reactive({ score: 100, user: { name: 'Bob' } })  
const { score, user } = toRefs(state) // 解構后屬性仍為響應式  
</script>  

2.2 組合函數：邏輯復用的「瑞士軍刀」

將可復用邏輯封裝為獨立函數，提升代碼復用性。

示例：帶本地存儲的計數器

// usePersistedCounter.js  
import { ref, watch, onMounted } from 'vue'  
export function usePersistedCounter(key, initialValue = 0) {  const count = ref(initialValue)  // 加載本地數據  onMounted(() => {  const stored = localStorage.getItem(key)  if (stored) count.value = parseInt(stored)  })  // 保存數據到本地  watch(count, (val) => localStorage.setItem(key, val.toString