背景

以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节，课程链接在此：Vue 3 Reactivity - Vue 3 Reactivity | Vue Mastery，本文档可作为课程的辅助材料，配合食用，快乐双倍！

我们先来看一下这个简单的Vue应用程序，Ok！如果我们加载了这个组件，然后我们的价格price发生了改变，Vue是如何知道更新模版内容的呢？接下来，我们将会用 Vue3 建造响应式的方法，从头开始制造一个响应式引擎，让我们一步一步的来解决这个问题！

【Vue3响应式原理#01】Reactivity

dep

How can we save the total calculation, so we can run it agine when price or quantity updates ?

如何存储 total 的计算方式，当 price 或 quantities 更新时，total 再计算一次？

我们想将下面这段代码存储在某种储藏室中，然后我们需要运行它，之后我们还想再次运行这个被存储的代码【被存储可能有多种功能代码】

let total = price * quantity

让我们来实现一下，下面所列举的effect() 、 track() 、 trigger()你都可以在 Vue3 响应性源码中看到同名的函数。

dep：一个 Set 对象，存储我们的effects，或者说是一个effect集（Set）。我们在这里使用 Set 的原因是 Set 不允许出现重复值，当我们尝试添加同样的effect时，它不会变成 Set 集合的两个子成员
effect()：一个方法，包含了我们想要存储的代码
track()：一个方法，使用dep变量去保存effect
trigger()：一个方法，遍历dep去运行我们存储的所有代码

【Vue3响应式原理#01】Reactivity

depsMap

Often our objects will have multiple properties and each property will need their own dep. How can we store these ?

通常，我们的对象会有多个属性，每个属性都需要自己的 Dep（依赖关系），或者说 effect 的 Set 集合，那么，我们如何存储，或者说怎样才能让每个属性都拥有自己的依赖呢？

我们现在拥有一个product对象，其每一个属性都需要有自己的dep。【dep其实就是一个effect集（Set），这个 effect集应该在值发生改变时重新运行。】

正如我们看到的，dep的类型是 Set，Set 中的每个值都只是一个我们需要执行的effect，就像我们这个计算total的匿名函数。要把这些dep存储起来，且方便我们以后在找到他们，我们要创建一个depsMap

depsMap： 一个 Map 对象，存储了每个属性到其自己依赖dep对象的映射；每一个属性都拥有它们自己的，可以重新运行effect的dep；我们使用对象属性名作为键，比如price和quantity，值是一个dep【effect集】

【Vue3响应式原理#01】Reactivity

让我们来实现一下，代码如下：

<html>   <head></head>   <body>     <div id="app">       <div>depsMap</div>     </div>   </body>   <script>     const depsMap = new Map()      // Save this code     function track(key) {       let dep = depsMap.get(key) // Get the dep for this property       if (!dep) {         depsMap.set(key, (dep = new Set())) // No dep yet, so let's create one        }       dep.add(effect) // Add this effect Since it's a set, it won't add the effect again if it already exists     }      // Run all the code I've saved      function trigger(key) {       let dep = depsMap.get(key) // Get the dep for the key       if (dep) {         dep.forEach(effect => {           effect() // If it exists, run each effect         })       }     }      let product = {       price: 5,       quantity: 2,     }     let total = 0      let effect = () => {       total = product.price * product.quantity     }      track('quantity')     effect()   </script> </html>

当我们触发函数trigger('quantity') ， effect就运行了；控制台输出结果如下：

【Vue3响应式原理#01】Reactivity

现在我们就对对象中的不同属性有了一种跟踪依赖关系的方法

targetMap

What if we have multiple reactive objects that each need to track effects ?

如果我们有多个响应式对象，每个响应式对象属性都需要存储 effect 呢？例如？

let product = { price: 5, quantity: 2 }  let user = { name: "burc", age: 18 }

到目前为止，我们有一张 depsMap，它存储了每个属性自己的依赖对象（属性到自己依赖对象的映射）。然后每个属性都拥有它们自己的并可以重新运行effect的dep。

我们这里需要一个其他对象，即 targetMap 。它的键以某种方式引用了我们的响应性对象，例如product或user

targetMap： 一个 WeakMap 对象，它储存了与每个响应性对象属性关联的依赖，在 Vue3 中，它被称为目标图
WeakMap： 与 Map 结构类似，但只接受对象作为键名（null除外），不接受其他类型的值作为键名

【Vue3响应式原理#01】Reactivity

用一个简单的例子告诉我们 WeakMap 是如何工作的，如想了解详细API请移步阮一峰ES6文档-WeakMap

let product = { price: 5, quantity: 2 }  const targetMap = new WeakMap() targetMap.set(product, "example code to test")  console.log(targetMap.get(product)) //"example code to test"

让我们来实现一下，代码如下：

<html>   <head></head>   <body>     <div id="app">       <div>targetMap</div>     </div>   </body>   <script>     const targetMap = new WeakMap() // For storing the dependencies for each reactive object      // Save this code     function track(target, key) {       let depsMap = targetMap.get(target) // Get the current depsMap for this target(reactive object - product)       if (!depsMap) {         targetMap.set(target, (depsMap = new Map())) // If it doesn't exist, create it       }       let dep = depsMap.get(key) // Get the dependency object for this peoperty - quantity       if (!dep) {         depsMap.set(key, (dep = new Set())) // If it doesn't exist, create it       }       dep.add(effect) // Add the effect to the dependency     }      // Run all the code I've saved     function trigger(target, key) {       const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies?       if (!depsMap) {         return // If no, return from the function immediately       }       let dep = depsMap.get(key) // Otherwise, check if this property has a dependency       if (dep) {         dep.forEach(effect => {           effect()         }) // Run those       }     }      let product = { price: 5, quantity: 2 }     let total = 0      let effect = () => {       total = product.price * product.quantity     }      track(product, 'quantity')     effect()   </script> </html>

当我们触发函数 trigger(product, 'quantity')，effect就运行了；控制台输出结果如下：

【Vue3响应式原理#01】Reactivity