专栏分享：vue2源码专栏，vue3源码专栏，vue router源码专栏，玩具项目专栏，硬核💪推荐🙌

欢迎各位ITer关注点赞收藏🌸🌸🌸

背景

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

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

简单的Vue应用程序.png

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 去运行我们存储的所有代码

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 集】

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

<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 就运行了；控制台输出结果如下：

depsMap控制台.png

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

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 除外），不接受其他类型的值作为键名

用一个简单的例子告诉我们 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 就运行了；控制台输出结果如下：

targetMap控制台.png

diagram

让我们再分析概括一下图表

targetMap： 存储了每个 响应性对象属性 关联的依赖；类型是 WeakMap
depsMap： 存储了每个属性的依赖；类型是 Map
dep： 存储了我们的 effects，一个 effects 集，这些 effect 在值发生变化时重新运行；类型是 Set

Now！我们就实现了一种储存不同 effect 的方法，但是我们还没有办法让我们的 effect 自动重新运行。这是第二个重要的部分，将在下一篇文章讲解！

【Vue3响应式原理#01】Reactivity

背景

dep

depsMap

targetMap

diagram