Vue 3 核心变化解析：Composition API 与响应式系统详解

一、从 Options API 到 Composition API：代码组织与复用范式的飞跃

在 Vue 2 中，组件是基于选项（Options API）组织的。开发者必须按照固定的配置项，将组件状态归入 data、将操作方法归入 methods、将派生状态归入 computed、将副作用归入 watch 与生命周期钩子。

在简单或中小型组件中，Options API 的结构规则清晰且易于入门；但随着组件承载的业务复杂度攀升，这种按“代码角色”而非“业务逻辑”切分的方式暴露出了严重的维护短板：同一个业务功能（例如搜索防抖过滤）的变量在顶部 data，方法在中间 methods，而派生列表在底部的 computed。当一个组件同时包含 4~5 个交互特性时，维护者必须在不同的选项块之间频繁上下翻滚查找，认知负荷显著提升。

1. 逻辑内聚：组合式函数（Composables）解决代码碎片化

Composition API 的核心思想是关注点聚合。借助 setup 语法糖，开发者可以将某项特定功能的状态声明、计算逻辑、监听行为和操作函数紧密组织在一起，甚至将其完整提取为一个独立的 JavaScript 函数（即 Composable）。

例如，我们将“列表搜索”与“分页切换”两个功能解耦为独立的组合式逻辑：

// 组合式函数封装：useSearch.js
import { ref, computed } from 'vue';

export function useSearch(listRef) {
  const keyword = ref('');

  const filteredList = computed(() => {
    if (!keyword.value.trim()) return listRef.value;
    return listRef.value.filter(item => item.name.includes(keyword.value.trim()));
  });

  const clearKeyword = () => {
    keyword.value = '';
  };

  return { keyword, filteredList, clearKeyword };
}

在组件消费端，只需要直接导入并调用该函数，即可自由组装多个独立的业务闭环：

<script setup>
import { ref } from 'vue';
import { useSearch } from './useSearch';
import { usePagination } from './usePagination';

const rawData = ref([
  { id: 1, name: 'Composition API 实战' },
  { id: 2, name: 'Vue 3 响应式原理剖析' }
]);

// 组装功能A：搜索内聚
const { keyword, filteredList, clearKeyword } = useSearch(rawData);

// 组装功能B：分页内聚（依赖过滤后的结果）
const { currentPage, pageSize, pagedList, nextPage } = usePagination(filteredList);
</script>

<template>
  <div class="search-panel">
    <input v-model="keyword" placeholder="搜索关键词..." />
    <button @click="clearKeyword">清空</button>
    <ul>
      <li v-for="item in pagedList" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="nextPage">下一页</button>
  </div>
</template>

2. 彻底终结 Mixins 的历史弊端

在 Vue 2 时代，跨组件复用逻辑的主要方案是 Mixins（混入）。然而，Mixins 带来了三个长期难以解决的工程痛点：

• 命名冲突隐患：多个 Mixin 若定义了同名的 data 或 methods，后混入的配置会无声覆盖先混入的配置，且缺乏类型系统的编译期提示。
• 隐式依赖与数据来源模糊：在模板中使用 this.fetchUser() 时，开发者很难直观判断该方法来自哪个 Mixin，溯源极其繁琐。
• TypeScript 类型推导障碍：由于 Mixins 依赖向 this 动态注入属性，TS 难以推导出精准的类型签名。

Composition API 的组合式函数本质上是普通的纯函数，其状态以参数传入、以对象解构返回。变量来源清晰可见，完全支持重命名，且与 TypeScript 类型推导天然契合。

二、响应式底层重构：从 Object.defineProperty 到 Proxy

除了上层的编码方式革新，Vue 3 对底层的核心响应式引擎进行了颠覆式的重写。Vue 2 基于 ES5 的 Object.defineProperty，而 Vue 3 采用现代浏览器的原生 Proxy 与 Reflect API。

1. Vue 2 响应式瓶颈分析

Object.defineProperty 只能对对象已存在的属性设置 getter 和 setter。这一底层特性直接导致了 Vue 2 的几个经典限制：

• 无法捕获新增属性：在初始化完成后直接执行 this.obj.newProp = 123，由于 newProp 没有事先通过 defineProperty 劫持，视图根本无法收到变更通知，必须依赖 this.$set(this.obj, 'newProp', 123)。
• 无法感知属性删除：使用 delete this.obj.prop 同样无法触发更新，必须依赖 this.$delete()。
• 数组拦截的妥协设计：直接通过索引修改项（arr[0] = val）或变更长度（arr.length = 0）无法被捕获。Vue 2 只能通过改写数组原型上的 7 个变异方法（push、pop、shift、unshift、splice、sort、reverse）来实现数组响应。
• 首屏深度递归的性能包袱：在 observe 阶段，Vue 2 会在组件创建时立即对整个 data 树进行递归遍历，大体积深层对象的初始化往往伴随着明显的 CPU 占用。

2. Vue 3 基于 Proxy 的彻底解决

Proxy 代理的是整个对象本身，而非对象的某个特定属性。它通过内建的捕获器（Trap）拦截对该对象的所有操作，具备如下突破性优势：

• 动态拦截能力：set 捕获器不仅能拦截已有属性的更新，也能拦截新增属性的写入；deleteProperty 捕获器则可直接拦截 delete 操作，官方因此彻底废弃了 $set 与 $delete。
• 原生数组与复杂集合支持：无论通过索引下标赋值 arr[index] = value，还是修改 length，都会自然经过 Proxy 的 set 捕获；同时原生支持 Map、Set、WeakMap、WeakSet 等集合类型。
• 按需惰性代理（Lazy Observation）：Vue 3 在初始化一个对象时，只对其顶层建立 Proxy。只有当用户代码在运行时实际读取某个嵌套子对象（get 拦截触发）时，系统才会递归为其创建子 Proxy。这一优化使得深层复杂数据结构的初始化性能得到了成倍提升。

三、响应式系统核心工作流：track 与 trigger 机制

Vue 3 的响应式系统是一个解耦的独立模块（@vue/reactivity），不依赖任何 DOM 环境。其核心闭环由依赖收集（track）与派发更新（trigger）两步构成。

1. 三层拓扑存储体系：targetMap

为了精准记录“哪个对象的哪个属性被哪个副作用函数依赖”，Vue 3 维护了一个全局的依赖拓扑结构：

• 第一层：targetMap (WeakMap)：以原始目标对象（Target）作为键。选用 WeakMap 保证当原始对象失去引用时能够被垃圾回收机制正常清理，防止内存泄漏。
• 第二层：depsMap (Map)：以对象的具体属性名（Key）作为键，值为该属性专属的依赖集合。
• 第三层：dep (Set<ReactiveEffect>)：以 Set 存储所有访问过该属性的 ReactiveEffect 副作用实例，保证同一个副作用函数不会重复收集。

2. 简易实现：20 行核心代码理解响应式精髓

以下代码直观还原了 reactive、track 与 trigger 的极简核心骨架：

let activeEffect = null;
const targetMap = new WeakMap();

// 1. 依赖收集函数
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let dep = depsMap.get(key);
  if (!dep) depsMap.set(key, (dep = new Set()));
  dep.add(activeEffect);
}

// 2. 派发更新函数
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

// 3. 响应式对象工厂
function reactive(target) {
  return new Proxy(target, {
    get(obj, key, receiver) {
      const res = Reflect.get(obj, key, receiver);
      track(obj, key); // 读取时收集依赖
      return res;
    },
    set(obj, key, value, receiver) {
      const oldVal = obj[key];
      const res = Reflect.set(obj, key, value, receiver);
      if (oldVal !== value) {
        trigger(obj, key); // 写入时派发更新
      }
      return res;
    }
  });
}

// 4. 副作用封装器
function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn;
    fn();
    activeEffect = null;
  };
  effectFn();
}

四、核心原语辨析与实战避坑：ref、reactive 与 toRefs

在业务开发中，最常接触的响应式声明 API 是 ref 与 reactive。许多新手常因二者表面类似而在解构或赋值时引入响应性丢失的 Bug。

1. 陷阱一：直接重赋值导致 reactive 响应性断裂

reactive 返回的是目标对象的 Proxy 代理指针。如果开发者用一个新对象直接覆盖变量，外部引用将指向一个未被代理的普通对象，导致与原先建立的依赖链脱钩：

// ❌ 典型错误写法：失去响应性
let userList = reactive([1, 2, 3]);
userList = [4, 5, 6]; // 此时 userList 变成了普通 Array，视图再也不会更新！

// ✅ 正确做法方案一：改用 ref
const userList = ref([1, 2, 3]);
userList.value = [4, 5, 6]; // 正确触发更新

// ✅ 正确做法方案二：若是 reactive，通过原地清空后修改内部元素
const userList = reactive([1, 2, 3]);
userList.length = 0;
userList.push(4, 5, 6);

2. 陷阱二：解构赋值引发的“响应性脱敏”

JavaScript 的解构赋值是浅层值复制。当解构 reactive 的基础类型属性时，解构出的变量只是一个纯粹的值，断开了与 Proxy 的 get/set 连接：

const state = reactive({
  count: 0,
  title: 'Vue 3'
});

// ❌ 错误做法：直接解构
let { count } = state;
count++; // 仅仅修改了局部变量 count，state.count 与视图毫无反应！

// ✅ 正确做法：借助 toRefs 将每个属性包装为 Ref
import { toRefs } from 'vue';
const { count, title } = toRefs(state);
count.value++; // 完美同步至 state.count，视图正常重绘

五、工程化落地：编写高质量组合式函数（Composable）

掌握了 Composition API 与响应式机制后，在实际项目中封装自定义组合式函数需要遵循一致的规范：

1. 命名以 use 开头：例如 useWindowScroll、useUserSession，明确标识其内部包含响应式状态。
2. 输入参数的宽容处理（MaybeRef / toValue）：工具型组合式函数的入参应同时兼容普通原始值和 ref 引用。使用 Vue 3.3+ 引入的 toValue()（或 unref()）规范提取实际值。
3. 输出格式约定：统一返回一个由 ref 组成的普通 JavaScript 对象。这样消费端既可以通过整体调用保持命名空间，也可以通过解构任意提取所需字段且不丢失响应性。
4. 副作用的自包含与清理：若组合式函数内部挂载了事件监听器（如 addEventListener）或定时器，必须在 onUnmounted 中主动解绑，确保逻辑自闭环且不遗留内存泄漏风险。

// 完整生产级组合式函数示例：useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  // 返回普通对象包裹的 ref，消费端可随意解构
  return { x, y };
}

六、总结与认知升维

Vue 3 的演进并非零散的功能补充，而是紧扣前端工程诉求的技术跃迁：

• 在逻辑组织层面：Composition API 将 Options API 中分散割裂的代码块重新聚拢，赋予了开发者按“业务能力”进行模块封装的自由，配合清晰的数据流动机制，彻底解决了大型项目中的复用与维护困境。
• 在底层机制层面：Proxy 替换 defineProperty 打破了 JavaScript 历史语法包袱的桎梏，不仅带来了全方位的动态属性监听与原生数据结构支持，更通过惰性拦截与三层依赖拓扑，实现了性能与内存利用率的跨越式提升。

理解这些底层机制与原语设计背后的权衡，不仅能让我们在日常编码中避开各类微妙的响应式陷阱，更能自如驾驭 Vue 3 生态，构建出架构清晰、高内聚、易维护的现代化前端应用。