Vuejs设计与实现 —— 实现响应式系统

站长

2022年11月14日 12:55 · 阅读数 34

前言

若你想了解虚拟 DOM 的部分，可见 Vuejs设计与实现 —— 为什么需要虚拟 DOM

Vuejs 三大核心模块：

Compiler 模块：涉及 AST 抽象语法树的内容，再通过 generate 将 AST 生成渲染函数等
Runtime 模块：也称为 Renderer 模块，将虚拟 DOM 生成真实 DOM 元素，并渲染到浏览器上
Reactivity 模块：响应式系统，将 JavaScript 对象代理为数据模型，而当你修改数据模型时，视图会进行更新

其中响应式系统是 Vuejs 中的重要组成部分，相信这一部分大家都是深有体会的，下面就尝试实现响应式系统，目的是为了更好的了解响应式系统的设计与实现的过程。

响应式数据 & 副作用函数

什么是副作用函数？

顾名思义，副作用函数指的就是会产生 副作用 的函数。

其中的函数不难理解，那么 副作用 是什么呢？

下面举个栗子，存在如下两个函数（具体作用看注释）：

// 设置 body 中文本内容
function setTextForBody(text = 'hello vue3'){
  document.body.innerText = text
}

// 获取 body 中的文本并输出
function getTextFromBody(){
  console.log("document.body = ", document.body.innerText)
}

当函数 setTextForBody 函数执行时，会将页面中 body 的内容默认设置为 'hello vue3'，而 getTextFromBody 函数是负责获取 body 的文本内容。那么当 setTextForBody 调用时传入的参数不同，会导致 getTextFromBody 函数中获取到的内容也会发生改变，甚至是在其他函数中也有类似的设置或读取 body 中文本内容的操作，都会 受到直接或间接的影响，那么就可以称这个函数（这里是 setTextForBody 函数）产生了 副作用（effect）。

什么是响应式数据？

请看下面的栗子：

// 初始数据
const data = { text: 'hello world' }

// 副作用函数
function effect(){
  document.body.innerText = data.text
}

// 修改数据
setTimeout(() => {
  data.text = 'hello vue3'
}, 3000);

如上代码中，副作用函数 effect 会设置 body 的文本内容为数据 data 对象中的 text 属性，而 setTimeout 则负责 3s 后将 data.text 的值进行修改。

期望的是，当代码执行 data.text = 'xxx' 的代码时，副作用函数 effect 可以自动执行，而省略手动调用的过程，那如果能实现这个目标，那么就可以将 data 对象称为响应式数据。

响应式数据的基本实现

通过上面的代码，不难发现（毕竟代码量很少）：

当副作用函数 effect 执行时，会通过 data.text 进行 读取操作
当需要修改 text 字段值时，会通过 data.text = xxx 进行 设置操作 其中 读取操作 和 设置操作 正好对应 JavaScript 中的 getter 和 setter，在 Vue.js 2 中采用的是 Object.defineProperty 函数进行实现，而在 Vue.js 3 中已经转向 Proxy 的实现方式。

基本思路

将原始数据进行代理，实现 getter 和 setter 函数
当执行副作用 effect 函数时，会触发对应数据的 getter 函数，此时将这个 effect 函数保存到容器 bucket 中，等待在未来某时刻执行
当执行 data.text = xxx 操作时，会触发对应数据的 setter 函数，此时从容器 bucket 中取出所有 effect 函数并执行它们

// 存储副作用函数的容器
const bucket = new Set()

// 原始数据
const rawData = { text: 'hello world' }

// 副作用函数
function effect(){
  document.body.innerText = proxyData.text
}

// 响应式函数
function reactive(target){
  return new Proxy(target, {
      get(target, key){
        // 保存副作用函数 effect
        bucket.add(effect)

        // 返回访问的值
        return target[key]
      },
      set(target, key, newValue){
        // 设置新值
        target[key] = newValue

        // 从容器 bucket 中取出 effect 函数并执行
        bucket.forEach(fn => fn())

        // 表示设置成功
        return true
      }
    })
}

// 对原始数据进行代理
const proxyData = reactive(rawData)

现在可以使用下面的代码来进行测试：

// 初始化执行，触发 getter 函数，收集 effect
effect()

// 2s 后对 proxyData.text 进行修改
setTimeout(() => {
  console.log('定时器执行，触发修改')
  proxyData.text = 'hello vue3'
}, 2000)

得到的结果如下：

完善响应式系统

明确副目标对象和作用函数关系

存在缺陷

上面通过硬编码的形式进行的实现，存在着如下的缺陷：

强制副作用的函数名为 effect，这会导致一旦产生副作用的函数名不是 effect，那么上述的代码实现就无法达到预期的效果
- 最佳实现 应该是哪怕副作用函数是匿名的，也能被正确的进行收集到容器中，从而在未来某个班时刻被执行
仅仅使用 set 数据结构作为副作用函数的容器，会导致 副作用函数和被操作目标的字段之间无法建立明确的关系
- 目前的实现是将所有的副作用函数全部放到同一个容器中进行存储，导致的结果就是一旦某个被操作的目标字段进行更新操作，这会导致容器中的所有的副作用（即使是无关的）全部都会执行一遍
- 最佳实现 应该是只执行和当前被操作目标中具体字段相关的副作用函数，可以是一个或多个

完善思路

由于期望的副作用函数可以是任意形式的函数，因此需要一个全局变量 activeEffect 存储当前被注册的副作用函数
为了 副作用函数和被操作目标的字段之间建立明确的关系，需要使用 WeakMap、Map、Set 重构对应的数据结构
- 通过 WeakMap 创建依赖容器 bucket，它的键是对应不同的被操作目标对象，它的值的类型是一个 Map 对象，这个 Map 对象的键是对应被操作目标对象中的不同字段，其中每个字段对应的值是 Set 数据结构，里面可以存储多个对应的副作用函数
- 可以通过下图进行辅助理解

【关于数据结构选择上的解释】：使用 WeakMap 用来存储不同的被操作目标对象，是因为 WeakMap 中的键是弱引用的，简单的说一旦外部环境没有对这个目标对象的引用，那么垃圾回收机制可以正常进行回收；而 Map 的键属于强引用，即便外部没有对目标对象的引用，但这个 Map 本身的键也会被认为是对目标对象的引用，因此会导致垃圾回收无法正常进行。

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// 用于接收并注册副作用函数
function effect(fn) {
  // 保存 fn
  activeEffect = fn

  // 执行 fn 函数，目的是初始化执行和触发 get 拦截
  fn()
}

// 响应式数据
function reactive(target) {
  return new Proxy(target, {
    get(target, key) {
      console.log("get =", key, Reflect.get(target, key));

      // 没有注册副作用函数，直接返回数据
      if (!activeEffect) return Reflect.get(target, key)

      track(target, key)

      return Reflect.get(target, key)
    },
    set(target, key, newVal) {
      console.log("set ", key, newVal);
      target[key] = newVal

      trigger(target, key)

      return Reflect.set(target, key, newVal)
    }
  })
}

// 收集依赖
function track(target, key) {
  // 从 bucket 获取 depsMap 的依赖关系
  let depsMap = bucket.get(target)
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()))
  }

  // 从 depsMap 获取 deps 集合
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }
  deps.add(activeEffect)
}

// 触发依赖
function trigger(target, key) {
  // 获取对应的 depsMap
  const depsMap = bucket.get(target)
  if (!depsMap) return

  // 获取对应的 deps
  const deps = depsMap.get(key)
  // 执行相应的 effect
  deps && deps.forEach(effect => effect())
}

动态清除无用副作用函数

存在缺陷

若执行下面的测试代码，那么会产生 遗留的副作用函数依赖：

// 获得响应式数据
const data = reactive({
  text: 'hello world...',
  ok: true
})

// 注册副作用函数
effect(() => {
  console.log('effect running ...')
  document.body.innerText = data.ok ? data.text : 'not ok'
})

当初始化 ok = true 时执行，会产生依赖关系为：
当发生修改操作 ok = false 后，此时会执行对应副作用函数，同时意味着 data.text 字段将不会再被访问到，理想情况是此时 data.text 字段所对应的副作用函数依赖应该要被清除

完善思路

每次副作用函数执行时，将副作用函数从所有与之有关联的依赖集合中进行删除
当副作用函数执行完毕后，又会产生新的依赖关系，但这个新的依赖关系就不会包含遗留的副作用函数

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// 用于接收并注册副作用函数
function effect(fn) {

 const effectFn = () => {
   // 先调用 cleanup 函数完成旧依赖的清除工作
   cleanup(effectFn)
   // 保存 fn
   activeEffect = effectFn
   // 执行 fn 函数，目的是初始化执行和触发 get 拦截
   fn()
 }

 // 用于存储所有与其关联的副作用函数的依赖集合
 effectFn.deps = []
 // 执行副作用函数
 effectFn()
}

// 清除本次依赖相关的旧副作用函数
function cleanup(effectFn) {
 for (let i = 0; i < effectFn.deps.length; i++) {
   const deps = effectFn.deps[i]
   deps.delete(effectFn)
 }
 // 重置 effectFn.deps 数组
 effectFn.deps.length = 0
}

// 响应式数据
function reactive(target) {
 return new Proxy(target, {
   get(target, key) {

     // 没有注册副作用函数，直接返回数据
     if (!activeEffect) return Reflect.get(target, key)

     track(target, key)

     return Reflect.get(target, key)
   },
   set(target, key, newVal) {
     target[key] = newVal

     trigger(target, key)

     return Reflect.set(target, key, newVal)
   }
 })
}

// 收集依赖
function track(target, key) {
 // 从 bucket 获取 depsMap 的依赖关系
 let depsMap = bucket.get(target)
 if (!depsMap) {
   bucket.set(target, (depsMap = new Map()))
 }

 // 从 depsMap 获取 deps 集合
 let deps = depsMap.get(key)
 if (!deps) {
   depsMap.set(key, (deps = new Set()))
 }
 deps.add(activeEffect)

 // 将与当前副作用函数存在联系的依赖集合 deps 添加到 activeEffect.deps 数组中
 activeEffect.deps.push(deps)
}

// 触发依赖
function trigger(target, key) {
 // 获取对应的 depsMap
 const depsMap = bucket.get(target)
 if (!depsMap) return
 // 获取对应的 deps
 const effects = depsMap.get(key)

 // 构建新的 Set 避免递归
 const effectsToRun = new Set(effects)
 // 执行相应的 effect
 effectsToRun.forEach(effectFn => effectFn())
}

支持嵌套的 effect 函数

为什么要支持嵌套 effect 函数？

用 Vuejs 来举例，如组件的嵌套就需要支持嵌套的 effect 函数，伪代码如下：

存在缺陷

假设存在如下的嵌套关系，存在的缺陷如下：

当定时器执行并只更改 data.text 的值，此时只有 effect2 执行了，而期望的 effect1 却没执行执行
原因是 目前使用全局变量 activeEffect 来存储通过 effect 函数注册的副作用函数，意味着同一时刻 activeEffect 存储的副作用函数只能有一个。当副作用函数发生嵌套时，内层的副作用函数的执行会覆盖 activeEffect 的值，当外部响应式数据进行依赖收集时，它们收集到的副作用函数将会是内层的副作用函数

Vuejs设计与实现 —— 实现响应式系统

// 获得响应式数据
const data = reactive({
  text: 'hello world...',
  ok: true
})

// 注册副作用函数
effect(() => {
  effect(() => {
    console.log('effect2 执行：', data.ok)
  })

  console.log('effect1 执行：', data.text)
})

console.log("bucket = ", bucket);

setTimeout(() => {
  console.log('setTimeout 执行，修改 data.text 的值')
  data.text = 'hello vue3...'
}, 1000);

完善思路

通过副作用函数栈 effectStack 将正在执行的副作用函数入栈，等到副作用函数执行完毕后再弹出栈，并保证 activeEffect 始终是指向栈顶的副作用函数。

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// effect 栈
const effectStack = []

// 用于接收并注册副作用函数
function effect(fn) {

  const effectFn = () => {
    // 先调用 cleanup 函数完成旧依赖的清除工作
    cleanup(effectFn)
    // 保存 fn
    activeEffect = effectFn
    // 在副作用函数调用前，将副作用函数入栈
    effectStack.push(effectFn)
    // 执行 fn 函数，目的是初始化执行和触发 get 拦截
    fn()
    // 副作用函数执行完成后出栈
    effectStack.pop()
    // 将 activeEffect 指向栈顶（原先）的副作用函数
    activeEffect = effectStack[effectStack.length - 1]
  }

  // 用于存储所有与其关联的副作用函数的依赖集合
  effectFn.deps = []
  // 执行副作用函数
  effectFn()
}

// 清除本次依赖相关的旧副作用函数
function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const deps = effectFn.deps[i]
    deps.delete(effectFn)
  }
  // 重置 effectFn.deps 数组
  effectFn.deps.length = 0
}

// 响应式数据
function reactive(target) {
  return new Proxy(target, {
    get(target, key) {

      // 没有注册副作用函数，直接返回数据
      if (!activeEffect) return Reflect.get(target, key)

      track(target, key)

      return Reflect.get(target, key)
    },
    set(target, key, newVal) {
      target[key] = newVal

      trigger(target, key)

      return Reflect.set(target, key, newVal)
    }
  })
}

// 收集依赖
function track(target, key) {
  // 从 bucket 获取 depsMap 的依赖关系
  let depsMap = bucket.get(target)
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()))
  }

  // 从 depsMap 获取 deps 集合
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }
  deps.add(activeEffect)

  // 将与当前副作用函数存在联系的依赖集合 deps 添加到 activeEffect.deps 数组中
  activeEffect.deps.push(deps)
}

// 触发依赖
function trigger(target, key) {
  // 获取对应的 depsMap
  const depsMap = bucket.get(target)
  if (!depsMap) return
  // 获取对应的 deps
  const effects = depsMap.get(key)

  // 构建新的 Set 避免递归
  const effectsToRun = new Set(effects)
  // 执行相应的 effect
  effectsToRun.forEach(effectFn => effectFn())
}

避免无限递归循环

存在缺陷

如下面的例子，就会产生无限循环：

// 获得响应式数据
const data = reactive({
 count: 1
})

// 注册副作用函数
effect(() => {
 data.count++ // 等价于 data.count = data.count + 1
})

其中，既会读取 data.count 的值，又会设置 data.count 的值，每次 trigger 操作触发时，本次还没有执行完，又触发了下一次的 trigger 操作，这就会产生无限递归调用自身，导致栈溢出。

完善思路

在 trigger 操作发生时添加是否执行副作用函数的条件：若 trigger 触发执行的副作用函数与当前的正则执行的副作用函数相同，则不触发执行。

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// effect 栈
const effectStack = []

// 用于接收并注册副作用函数
function effect(fn) {

 const effectFn = () => {
   // 先调用 cleanup 函数完成旧依赖的清除工作
   cleanup(effectFn)
   // 保存 fn
   activeEffect = effectFn
   // 在副作用函数调用前，将副作用函数入栈
   effectStack.push(effectFn)
   // 执行 fn 函数，目的是初始化执行和触发 get 拦截
   fn()
   // 副作用函数执行完成后出栈
   effectStack.pop()
   // 将 activeEffect 指向栈顶（原先）的副作用函数
   activeEffect = effectStack[effectStack.length - 1]
 }

 // 用于存储所有与其关联的副作用函数的依赖集合
 effectFn.deps = []
 // 执行副作用函数
 effectFn()
}

// 清除本次依赖相关的旧副作用函数
function cleanup(effectFn) {
 for (let i = 0; i < effectFn.deps.length; i++) {
   const deps = effectFn.deps[i]
   deps.delete(effectFn)
 }
 // 重置 effectFn.deps 数组
 effectFn.deps.length = 0
}

// 响应式数据
function reactive(target) {
 return new Proxy(target, {
   get(target, key) {

     // 没有注册副作用函数，直接返回数据
     if (!activeEffect) return Reflect.get(target, key)

     track(target, key)

     return Reflect.get(target, key)
   },
   set(target, key, newVal) {
     target[key] = newVal

     trigger(target, key)

     return Reflect.set(target, key, newVal)
   }
 })
}

// 收集依赖
function track(target, key) {
 // 从 bucket 获取 depsMap 的依赖关系
 let depsMap = bucket.get(target)
 if (!depsMap) {
   bucket.set(target, (depsMap = new Map()))
 }

 // 从 depsMap 获取 deps 集合
 let deps = depsMap.get(key)
 if (!deps) {
   depsMap.set(key, (deps = new Set()))
 }
 deps.add(activeEffect)

 // 将与当前副作用函数存在联系的依赖集合 deps 添加到 activeEffect.deps 数组中
 activeEffect.deps.push(deps)
}

// 触发依赖
function trigger(target, key) {
 // 获取对应的 depsMap
 const depsMap = bucket.get(target)
 if (!depsMap) return
 // 获取对应的 deps
 const effects = depsMap.get(key)

 // 构建新的 Set 避免递归
 const effectsToRun = new Set(effects)
 // 执行相应的 effect
 effectsToRun && effectsToRun.forEach(effectFn => {
   // 避免递归调用自身
   if (effectFn !== activeEffect) effectFn()
 })
}

实现可调度执行 — 调度器函数

什么是可调度性？

可调度指的是当 trigger 触发副作用函数重新执行时，提供给使用者决定副作用函数执行的时机、次数和方式。

通过下面的代码举个栗子：

// 获得响应式数据
const data = reactive({
 count: 1
})

// 注册副作用函数
effect(() => {
 console.log(data.count)
})

data.count++

console.log('结束了')

其对应的数据输出结果为：1 2 '结束了'，假设使用者需要的输出顺序是：1 '结束了' 2，那么就需要当前的响应式系统支持调度。

实现思路

给现有的 effect 函数多添加一个可选参数 options，允许使用者指定调度器，例如：

effect(()=>{
    console.log(data.count)
},
{
    // 将调度器设置名为 scheduler 的函数
    scheduler(fn){
     ...
    }
})

在 effect 函数中注册副作用函数时，将这个 options 选项挂载到对应的副作用函数上
在 trigger 函数触发副作用函数重新执行时，通过直接调用 options 中传入的调度器函数，把控制权移交给使用者

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// effect 栈
const effectStack = []

// 用于接收并注册副作用函数
function effect(fn, options = {}) {

 const effectFn = () => {
   // 先调用 cleanup 函数完成旧依赖的清除工作
   cleanup(effectFn)
   // 保存 fn
   activeEffect = effectFn
   // 在副作用函数调用前，将副作用函数入栈
   effectStack.push(effectFn)
   // 执行 fn 函数，目的是初始化执行和触发 get 拦截
   fn()
   // 副作用函数执行完成后出栈
   effectStack.pop()
   // 将 activeEffect 指向栈顶（原先）的副作用函数
   activeEffect = effectStack[effectStack.length - 1]
 }

 // 将 options 挂载到 effectFn 上
 effectFn.options = options
 // 用于存储所有与其关联的副作用函数的依赖集合
 effectFn.deps = []
 // 执行副作用函数
 effectFn()
}

// 清除本次依赖相关的旧副作用函数
function cleanup(effectFn) {
 for (let i = 0; i < effectFn.deps.length; i++) {
   const deps = effectFn.deps[i]
   deps.delete(effectFn)
 }
 // 重置 effectFn.deps 数组
 effectFn.deps.length = 0
}

// 响应式数据
function reactive(target) {
 return new Proxy(target, {
   get(target, key) {

     // 没有注册副作用函数，直接返回数据
     if (!activeEffect) return Reflect.get(target, key)

     track(target, key)

     return Reflect.get(target, key)
   },
   set(target, key, newVal) {
     target[key] = newVal

     trigger(target, key)

     return Reflect.set(target, key, newVal)
   }
 })
}

// 收集依赖
function track(target, key) {
 // 从 bucket 获取 depsMap 的依赖关系
 let depsMap = bucket.get(target)
 if (!depsMap) {
   bucket.set(target, (depsMap = new Map()))
 }

 // 从 depsMap 获取 deps 集合
 let deps = depsMap.get(key)
 if (!deps) {
   depsMap.set(key, (deps = new Set()))
 }
 deps.add(activeEffect)

 // 将与当前副作用函数存在联系的依赖集合 deps 添加到 activeEffect.deps 数组中
 activeEffect.deps.push(deps)
}

// 触发依赖
function trigger(target, key) {
 // 获取对应的 depsMap
 const depsMap = bucket.get(target)
 if (!depsMap) return
 // 获取对应的 deps
 const effects = depsMap.get(key)

 // 构建新的 Set 避免递归
 const effectsToRun = new Set()
 effects && effects.forEach(effectFn => {
   // 避免递归调用自身
   if (effectFn !== activeEffect) effectsToRun.add(effectFn)
 })

 // 是否执行调度器函数
 effectsToRun.forEach(effectFn => {
   // 若副作用函数存在调度器，则调用调度器，并将 effectFn 函数作为参数传递
   if (effectFn.options.scheduler) {
     effectFn.options.scheduler(effectFn)
   } else {
     // 否则直接执行副作用函数
     effectFn()
   }
 })
}

基于调度器控制执行次数

为什么需要控制执行次数？

直接通过如下栗子进行解释：

// 获得响应式数据
const data = reactive({
 count: 1
})

// 注册副作用函数
effect(() => {
 console.log(data.count);
})

data.count++
data.count++

在没有指定调度器时，以上代码执行后输出结果为：1 2 3，但假设其中的 2 只是个过渡阶段，使用者只关心最后的结果 3，那么执行三次打印操作就是多余的，即期望输出为：1 3

实现思路

定义一个任务队列 jobQueue，选择 Set 数据结构，目的是利用它的自动去重功能
每次调度执行时，先将当前副作用函数添加到 jobQueue 队列中
定义一个 flushJob 函数刷新 jobQueue 队列中的副作用函数
- 其中需要设定一个 isFlushing 表示正在刷新的标志，用于去判断是否需要执行，只有当 isFlushing = false 时才需要执行，保证 flushJob 函数在一个周期内只调用一次
- 最后通过 promise.then 来将刷新 jobQueue 队列的执行添加到微任务队列中

即支持通过如下方式进行调用：

// 获得响应式数据
const data = reactive({
  count: 1
})

// 注册副作用函数
effect(() => {
  console.log(data.count);
}, {
  scheduler(effectFn) {
    // 将副作用函数添加到 jobQueue 队列中
    jobQueue.add(effectFn)
    // 调用 flushJob 刷新队列，减少不必要的执行
    flushJob()
  }
})

data.count++
data.count++

具体代码实现

// 存储副作用函数
const bucket = new WeakMap()

// 用于存储被注册的副作用函数
let activeEffect = null

// effect 栈
const effectStack = []

// 定义 jobQueue 任务队列
const jobQueue = new Set()
// 通过 promise 微任务实现异步执行
const resolvedPromise = Promise.resolve()
function nextTick(fn) {
  return fn ? resolvedPromise.then(fn) : resolvedPromise
}
// 表示当前是否正在刷新队列
let isFlushing = false

// 刷新队列函数
function flushJob() {
  // 当前正在刷新队列，则直接结束
  if (isFlushing) return

  // 一旦需要执行刷新队列，先将 isFlushing 置为 false
  isFlushing = true

  // 在微任务队列中刷新 jobQueue 队列
  nextTick(() => {
    jobQueue.forEach(job => job())
  }).finally(() => {
    // 刷新队列结束后，重置 isFlushing
    isFlushing = false
  })
}

// 用于接收并注册副作用函数
function effect(fn, options = {}) {

  const effectFn = () => {
    // 先调用 cleanup 函数完成旧依赖的清除工作
    cleanup(effectFn)
    // 保存 fn
    activeEffect = effectFn
    // 在副作用函数调用前，将副作用函数入栈
    effectStack.push(effectFn)
    // 执行 fn 函数，目的是初始化执行和触发 get 拦截
    fn()
    // 副作用函数执行完成后出栈
    effectStack.pop()
    // 将 activeEffect 指向栈顶（原先）的副作用函数
    activeEffect = effectStack[effectStack.length - 1]
  }

  // 将 options 挂载到 effectFn 上
  effectFn.options = options
  // 用于存储所有与其关联的副作用函数的依赖集合
  effectFn.deps = []
  // 执行副作用函数
  effectFn()
}

// 清除本次依赖相关的旧副作用函数
function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const deps = effectFn.deps[i]
    deps.delete(effectFn)
  }
  // 重置 effectFn.deps 数组
  effectFn.deps.length = 0
}

// 响应式数据
function reactive(target) {
  return new Proxy(target, {
    get(target, key) {

      // 没有注册副作用函数，直接返回数据
      if (!activeEffect) return Reflect.get(target, key)

      track(target, key)

      return Reflect.get(target, key)
    },
    set(target, key, newVal) {
      target[key] = newVal

      trigger(target, key)

      return Reflect.set(target, key, newVal)
    }
  })
}

// 收集依赖
function track(target, key) {
  // 从 bucket 获取 depsMap 的依赖关系
  let depsMap = bucket.get(target)
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()))
  }

  // 从 depsMap 获取 deps 集合
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }
  deps.add(activeEffect)

  // 将与当前副作用函数存在联系的依赖集合 deps 添加到 activeEffect.deps 数组中
  activeEffect.deps.push(deps)
}

// 触发依赖
function trigger(target, key) {
  // 获取对应的 depsMap
  const depsMap = bucket.get(target)
  if (!depsMap) return
  // 获取对应的 deps
  const effects = depsMap.get(key)

  // 构建新的 Set 避免递归
  const effectsToRun = new Set()
  effects && effects.forEach(effectFn => {
    // 避免递归调用自身
    if (effectFn !== activeEffect) effectsToRun.add(effectFn)
  })

  // 是否执行调度器函数
  effectsToRun.forEach(effectFn => {
    // 若副作用函数存在调度器，则调用调度器，并将 effectFn 函数作为参数传递
    if (effectFn.options.scheduler) {
      effectFn.options.scheduler(effectFn)
    } else {
      // 否则直接执行副作用函数
      effectFn()
    }
  })
}

最后

以上内容都是 Vue.js 内部响应式系统的实现思路，但其内部拥有一个更完善处理机制和边界情况，作为学习者而言了解其设计思路和设计原因其实也足够了，不过作为 coder 不要总是省略动手的过程。

转载自:https://juejin.cn/post/7086859229411147790