当前位置：首页 > news >正文

请谈谈 Vue 中的响应式原理，如何实现？

news 2025/9/11 20:31:21

一、Vue2响应式原理：Object.defineProperty的利与弊

实现原理：

// 数据劫持核心实现
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集容器
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) { // 当前Watcher实例
        dep.addSub(Dep.target); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      dep.notify(); // 触发更新
    }
  });
}

// 遍历对象属性实现响应式
function observe(data) {
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}

// 使用示例
const data = { count: 0 };
observe(data);

典型问题：

无法检测新增属性：

data.newProp = 'test'; // 不会触发更新
// 必须使用 Vue.set(data, 'newProp', 'test')

数组操作需要特殊处理：

// 直接修改数组下标无效
data.arr[0] = 1; // 不触发更新
// 必须使用变异方法：push/pop/splice等
data.arr.splice(0, 1, 1);

二、Vue3响应式原理：Proxy的降维打击

实现原理：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

// 使用示例
const state = reactive({ count: 0 });
state.newProp = 'test'; // 直接生效！
state.arr[0] = 1; // 直接生效！

优势对比：

特性	Vue2(defineProperty)	Vue3(Proxy)
新增属性监听	❌ 需要Vue.set	✅ 原生支持
数组操作	❌ 需特殊方法	✅ 原生支持
嵌套对象性能	❌ 递归劫持	✅ 按需代理

三、日常开发建议与避坑指南

1. 数据操作规范

// Vue2正确姿势
this.$set(this.obj, 'newKey', value);
this.arr.splice(index, 1, newValue);

// Vue3正确姿势（直接操作）
state.obj.newKey = value;
state.arr[index] = newValue;

2. 性能优化技巧

// 避免深层响应式（Vue3）
import { shallowRef } from 'vue';
const bigObject = shallowRef({ ... }); // 只跟踪.value变化

// 计算属性缓存
const doubleCount = computed(() => count.value * 2);

// 批量更新（Vue3）
import { nextTick } from 'vue';
async function batchUpdate() {
  state.a = 1;
  state.b = 2;
  await nextTick(); // DOM更新完成
}

3. 典型错误示例

// 错误1：解构丢失响应式（Vue3）
const { count } = reactiveObj; // ❌ 丢失响应式
const count = toRef(reactiveObj, 'count'); // ✅ 正确方式

// 错误2：异步更新陷阱
setTimeout(() => {
  state.count++; // 可能触发多次渲染
}, 100);

// 正确做法（Vue3）
watchEffect(() => {
  // 自动追踪依赖
  console.log(state.count);
});

四、响应式系统设计启示

依赖收集流程：
- 组件渲染时触发getter
- 将当前Watcher存入Dep
- 数据变更时通过Dep通知所有Watcher

更新队列机制：

// 伪代码实现
let queue = [];
function queueWatcher(watcher) {
  if (!queue.includes(watcher)) {
    queue.push(watcher);
    nextTick(flushQueue);
  }
}
function flushQueue() {
  queue.forEach(watcher => watcher.run());
  queue = [];
}