Vue 3.4 新特性详解：Composition API 与 Effect 作用域 API 实战

一、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