包教包会！Vue3源码之响应式原理（一）

课程链接：www.vuemastery.com/courses/vue…

先看如下代码：

const product = { price: 5, quantity: 2 };
let total = 0;
let effect = () => (total = product.price * product.quantity);
​
effect();
console.log(total); // --> 10
product.quantity = 3;
console.log(total); // --> 10

更改product.quantity = 3后，再次打印total，其值显然还是原来的10，因为product.quantity并不是响应式属性。

要将其变成响应式，也就是需要追踪product.quantity所关联的依赖，也就是effect函数，然后在product.quantity发生改变时触发effect执行才可。

追踪单个属性

我们需要有个地方，追踪依赖了product.quantity属性的effect，只有这样，当该属性发生变动时，就能找到依赖该属性的effect，然后遍历执行这些effect。

而这个地方需要满足两个条件：

• 存储的依赖能自动去重
• 能遍历

Set对象刚好满足上述条件。

修改代码，增加依赖收集对象，增加追踪依赖函数，如下：

const product = { price: 5, quantity: 2 };
let total = 0;
let effect = () => (total = product.price * product.quantity);
// 1.新增依赖收集对象
const dep = new Set();
​
// 2.新增追踪依赖函数
const track = () => {
  dep.add(effect);
};
​
effect();
console.log(total); // --> 10

修改代码，增加依赖触发执行函数，如下：

const product = { price: 5, quantity: 2 };
let total = 0;
let effect = () => (total = product.price * product.quantity);
// 1.新增依赖收集对象
const dep = new Set();
​
// 2.新增追踪依赖函数
const track = () => {
  dep.add(effect);
};
​
// 3.新增依赖触发执行函数
const trigger = () => {
  dep.forEach((effect) => effect());
};
​
effect();
console.log(total); // --> 10

之后在修改属性值的时候，触发依赖的执行即可。

初始时，需要触发track函数收集依赖，在product.quantity修改的时候，触发trigger函数，接着打印total验证响应是否成功：

// ...省略以上代码
effect();
​
//4.初始时，触发track收集依赖
track();
console.log(total); // --> 10
​
product.quantity = 3;
// 5.修改变量后，触发triger执行依赖
trigger();
console.log(total); // --> 15

成功！！！可以看到，当我们修改了product.quantity属性，然后执行trigger函数后，total值已经跟着一起改变！

总结

• 新增dep对象收集依赖，该对象是Set结构。

• 新增track函数，该函数收集依赖了该属性的effect，将其保存到dep中。

  • 初始时触发track函数收集依赖。

• 新增trigger函数，该函数遍历dep对象，并执行其中的effect。

  • 在属性值进行更新后，触发trigger函数遍历执行effect。

问题

以上有两个问题：

• 只能追踪单个属性的依赖。

• 依赖的收集track和依赖的执行trigger的触发都需要手动执行。

以上问题，在接下来两节中完善。

下一篇：包教包会！Vue3源码之响应式原理（二）