Vue 3源码深度解析之：`reactive`对象的`key`变更：如何处理新增和删除的属性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们来聊聊 Vue 3 响应式系统里的一个核心问题：reactive 对象中的 key 发生变更，也就是新增或者删除属性的时候，Vue 是怎么处理的。准备好了吗？咱们开车了！

一、响应式对象：你的数据，我的舞台

首先，咱们得明确一个概念：reactive 干了什么？简单来说，它就是把一个普通的 JavaScript 对象变成一个“响应式”的对象。啥叫响应式？就是说，当这个对象的数据发生变化时，所有用到这个数据的组件都会自动更新。这就像一个舞台，你的数据是演员，而组件就是观众。演员的表演一有变动，观众们立刻就能看到。

二、依赖收集：找到你，锁定你

要实现响应式，第一步就是“依赖收集”。也就是要搞清楚，哪些组件“依赖”了 reactive 对象的哪些属性。 Vue 内部维护了一个叫做 Dep 的类 (Dependency)，每个属性都有一个 Dep 实例。 Dep 实例就像一个“依赖列表”，记录着所有依赖于这个属性的 Watcher 实例。 Watcher 实例负责监听数据的变化，并在数据变化时触发组件的更新。

简单举个例子：

// 假设我们有这样一个 reactive 对象
const data = reactive({
  name: '张三',
  age: 18
});

// 有一个组件用到了 data.name
const component = {
  template: `<div>{{ data.name }}</div>`,
  setup() {
    return { data }
  }
};

// 当 data.name 发生变化时，这个组件就会自动更新
data.name = '李四';

在这个例子中，data.name 就有一个 Dep 实例，而渲染 {{ data.name }} 的组件的 Watcher 实例就会被添加到这个 Dep 实例的依赖列表中。

三、Key 的新增：欢迎新同学！

当 reactive 对象新增一个属性时，Vue 需要做以下几件事：

为新属性创建一个 Dep 实例： 就像给新来的同学分配一个位置一样，每个新属性都需要一个 Dep 实例来管理它的依赖。
将新属性设置为可观测的： 这意味着要使用 Object.defineProperty (或者 Proxy) 来拦截对新属性的访问和修改。
触发更新 (如果需要): 如果有组件在渲染时，使用了 Object.keys(reactiveObject) 或者 for...in 遍历了 reactive 对象，那么新增属性会导致这些组件需要重新渲染。

咱们来一段代码，模拟一下这个过程：

// 简化的 reactive 函数
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);

      if (result && oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });
}

// 简化的 track 函数 (依赖收集)
function track(target, key) {
  activeEffect = { /* 当前正在运行的 effect 函数 */ }; // 假设当前有一个 effect 函数
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
      dep = new Set();
      depsMap.set(key, dep);
    }

    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

// 简化的 trigger 函数 (触发更新)
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => {
      effect(); // 执行 effect 函数，触发组件更新
    });
  }
}

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

// 使用示例
const data = reactive({
  name: '张三'
});

// 模拟组件渲染，进行依赖收集
let age;
function effect() {
  age = data.age; // 访问 data.age，但此时 age 并不存在
  console.log("组件更新了!");
}
activeEffect = effect;
effect(); // 首次执行 effect

console.log(age); // undefined, 因为 data.age 不存在

// 添加新的 key
data.age = 18;
console.log(age); // 组件更新了，这里会重新调用 effect,  age 为 18

在这个简化的例子中，当我们给 data 对象添加 age 属性时，虽然 track 函数没有被直接调用，但是，由于 effect 函数在首次执行时访问了 data.age, 并且 data.age 在那时是 undefined, 因此当 data.age 被赋值时， trigger 函数会被调用，触发 effect 函数的执行，从而模拟了组件的更新。

四、Key 的删除：挥手告别，江湖再见

当 reactive 对象删除一个属性时，Vue 需要做以下几件事：

移除该属性的 Dep 实例： 就像把离职员工的工位撤掉一样，这个属性不再需要管理依赖了。
从所有依赖于该属性的 Watcher 实例中移除该 Dep 实例： 相当于通知所有“关注”这个属性的组件，这个属性已经不存在了，不要再监听它的变化了。
触发更新 (如果需要): 同样，如果组件使用了 Object.keys(reactiveObject) 或者 for...in 遍历了 reactive 对象，那么删除属性会导致这些组件需要重新渲染。

看代码：

// 假设我们有这样一个 reactive 对象
const data = reactive({
  name: '张三',
  age: 18
});

// 有一个组件用到了 data.name 和 data.age
function render() {
  console.log(`Name: ${data.name}, Age: ${data.age}`);
}

// 手动进行依赖收集
activeEffect = render;
render(); // 首次渲染，进行依赖收集

// 删除 age 属性
delete data.age;

// 再次渲染
render(); // 再次渲染，但此时 data.age 已经不存在了

在这个例子中，当我们删除 data.age 属性后，再次执行 render 函数时，data.age 的值会变成 undefined。虽然 Vue 会移除 data.age 的 Dep 实例，但是并不会自动更新组件。这是因为 Vue 的响应式系统是基于属性的，而不是基于整个对象的。也就是说，只有当属性的值发生变化时，才会触发组件的更新。

五、Proxy 的妙用：拦截，拦截，再拦截

Vue 3 使用 Proxy 来实现响应式。 Proxy 最大的好处就是可以拦截对对象的所有操作，包括属性的访问、修改、新增和删除。这使得 Vue 可以更加灵活地处理 key 的变更。

以下是一个使用 Proxy 实现 reactive 的简化版本：

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);

      if (result && oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      if (result) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });
}

在这个例子中，我们使用了 deleteProperty 拦截器来拦截对属性的删除操作。当删除属性时，trigger 函数会被调用，触发组件的更新。

六、Object.keys 和 for...in 的特殊待遇

前面提到，如果组件使用了 Object.keys(reactiveObject) 或者 for...in 遍历了 reactive 对象，那么新增或删除属性会导致这些组件需要重新渲染。这是因为 Vue 会对 Object.keys 和 for...in 进行特殊的处理。

当组件使用 Object.keys(reactiveObject) 时，Vue 会创建一个特殊的 Dep 实例，并将所有依赖于 reactiveObject 的组件的 Watcher 实例添加到这个 Dep 实例的依赖列表中。当 reactiveObject 的属性发生新增或删除时，这个 Dep 实例会被触发，从而导致所有依赖于 reactiveObject 的组件重新渲染。

for...in 的处理方式类似。

七、总结：Key 的变更，牵一发动全身

总的来说，reactive 对象 key 的变更是一个比较复杂的过程。 Vue 需要考虑到各种情况，包括新增属性、删除属性、以及使用 Object.keys 和 for...in 遍历对象等。通过 Proxy 和 Dep 实例，Vue 可以有效地管理依赖，并在数据发生变化时，及时触发组件的更新。

咱们来总结一下：

操作	Vue 的处理
新增属性	1. 为新属性创建 `Dep` 实例。2. 将新属性设置为可观测的。3. 如果有组件使用 `Object.keys` 或 `for...in` 遍历了 `reactive` 对象，则触发这些组件的更新。
删除属性	1. 移除该属性的 `Dep` 实例。2. 从所有依赖于该属性的 `Watcher` 实例中移除该 `Dep` 实例。3. 如果有组件使用 `Object.keys` 或 `for...in` 遍历了 `reactive` 对象，则触发这些组件的更新。
`Object.keys`	创建一个特殊的 `Dep` 实例，并将所有依赖于 `reactive` 对象的组件的 `Watcher` 实例添加到这个 `Dep` 实例的依赖列表中。当 `reactive` 对象的属性发生新增或删除时，这个 `Dep` 实例会被触发，从而导致所有依赖于 `reactive` 对象的组件重新渲染。
`for...in`	处理方式与 `Object.keys` 类似。

八、深入源码：窥探 Vue 的内心世界

如果你想更深入地了解 Vue 是如何处理 key 的变更的，建议你直接去看 Vue 的源码。 Vue 的源码虽然比较复杂，但是注释非常详细，而且结构也很清晰。通过阅读源码，你可以了解到 Vue 的内部实现细节，从而更好地理解 Vue 的响应式系统。

关键代码位置：

packages/reactivity/src/reactive.ts: reactive 函数的实现。
packages/reactivity/src/effect.ts: track 和 trigger 函数的实现。

九、面试 Tips：让你在面试中脱颖而出

如果你正在准备 Vue 的面试，那么掌握 reactive 对象 key 变更的处理方式是非常重要的。面试官可能会问你以下问题：

Vue 是如何实现响应式的？
reactive 对象新增或删除属性时，Vue 会做什么？
Vue 是如何处理 Object.keys 和 for...in 的？
Proxy 和 Object.defineProperty 的区别是什么？

掌握了这些知识点，你就可以在面试中轻松应对，展现你的技术实力。

好了，今天的讲座就到这里。希望大家有所收获！记住，学习技术就像开车，要多练习，多思考，才能开得又稳又快。下次再见！

发表回复 取消回复

发表回复取消回复