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

语言: CN / TW / HK

theme: smartblue

前言

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

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

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

响应式数据 & 副作用函数

什么是副作用函数?

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

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

下面举个栗子,存在如下两个函数(具体作用看注释):

```js // 设置 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)

什么是响应式数据?

请看下面的栗子: ```js // 初始数据 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 中的 gettersetter,在 Vue.js 2 中采用的是 Object.defineProperty 函数进行实现,而在 Vue.js 3 中已经转向 Proxy 的实现方式。

基本思路

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

```js // 存储副作用函数的容器 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) 现在可以使用下面的代码来进行测试:js // 初始化执行,触发 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 本身的键也会被认为是对目标对象的引用,因此会导致垃圾回收无法正常进行。

具体代码实现

```js // 存储副作用函数 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()) } ```

动态清除无用副作用函数

存在缺陷

若执行下面的测试代码,那么会产生 遗留的副作用函数依赖: ```js // 获得响应式数据 const data = reactive({ text: 'hello world...', ok: true })

// 注册副作用函数 effect(() => { console.log('effect running ...') document.body.innerText = data.ok ? data.text : 'not ok' }) `` - 当初始化ok = true时执行,会产生依赖关系为: <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ba9b6d96948451abeb897455b787179~tplv-k3u1fbpfcp-watermark.image?" width="100%"> - 当发生修改操作ok = false后,此时会执行对应副作用函数,同时意味着data.text字段将不会再被访问到,理想情况是此时data.text` 字段所对应的副作用函数依赖应该要被清除

完善思路

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

具体代码实现

```js // 存储副作用函数 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 的值,当外部响应式数据进行依赖收集时,它们收集到的副作用函数将会是内层的副作用函数

image.png

```js // 获得响应式数据 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 始终是指向栈顶的副作用函数。

具体代码实现

```js // 存储副作用函数 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()) } ## 避免无限递归循环 ### 存在缺陷 如下面的例子,就会产生无限循环:js // 获得响应式数据 const data = reactive({ count: 1 })

// 注册副作用函数 effect(() => { data.count++ // 等价于 data.count = data.count + 1 }) 其中,既会读取 `data.count` 的值,又会设置 `data.count` 的值,每次 **trigger** 操作触发时,本次还没有执行完,又触发了下一次的 **trigger** 操作,这就会产生无限递归调用自身,导致栈溢出。 ### 完善思路 在 **trigger** 操作发生时添加是否执行副作用函数的条件:**若 trigger 触发执行的副作用函数与当前的正则执行的副作用函数相同,则不触发执行**。 ### 具体代码实现js // 存储副作用函数 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 触发副作用函数重新执行时,提供给使用者决定副作用函数执行的时机、次数和方式。

通过下面的代码举个栗子: ```js // 获得响应式数据 const data = reactive({ count: 1 })

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

data.count++

console.log('结束了') 其对应的数据输出结果为:**1 2 '结束了'**,假设使用者需要的输出顺序是:**1 '结束了' 2**,那么就需要当前的响应式系统支持 **调度**。 ### 实现思路 - 给现有的 **effect** 函数多添加一个可选参数 **options**,允许使用者指定调度器,例如:js effect(()=>{ console.log(data.count) }, { // 将调度器设置名为 scheduler 的函数 scheduler(fn){ ... } }) - 在 **effect** 函数中注册副作用函数时,将这个 **options** 选项挂载到对应的副作用函数上 - 在 **trigger** 函数触发副作用函数重新执行时,通过直接调用 **options** 中传入的调度器函数,把控制权移交给使用者 ### 具体代码实现js // 存储副作用函数 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() } }) } ## 基于调度器控制执行次数 ### 为什么需要控制执行次数? 直接通过如下栗子进行解释:js // 获得响应式数据 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 队列的执行添加到微任务队列中

即支持通过如下方式进行调用: ```js // 获得响应式数据 const data = reactive({ count: 1 })

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

data.count++ data.count++ ```

具体代码实现

```js // 存储副作用函数 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 不要总是省略动手的过程。