当前位置:   article > 正文

Vue3 响应式是如何实现的_vue 将属性变成响应式方案

vue 将属性变成响应式方案

前言

本文使用 ref 对 vue 的响应性进行解读,仅仅是响应性原理解析,不涉及 vue 组件等概念。

vue 的响应性的实现,在 @vue/reactivity 包下,对应的源码目录为 packages/reactivity。如何调试 vue 源码,可查看该文章

为什么使用 ref 进行讲解,而不是 reactive?

ref 比 reactive 的实现简单,且不需要用到 es6 的 Proxy,仅仅需要使用到对象的 getter 和 setter 函数

因此,讲述响应性原理,我们用简单的 ref ,尽量减少大家的理解成本

什么是响应性?

这部分的响应性定义,来自 vue3 官方文档

这个术语在程序设计中经常被提及,但这是什么意思呢?响应性是一种允许我们以声明式的方式去适应变化的编程范例。人们通常展示的典型例子,是一份 excel 电子表格 (一个非常好的例子)。

如果将数字 2 放在第一个单元格中,将数字 3 放在第二个单元格中并要求提供 SUM,则电子表格会将其计算出来给你。不要惊奇,同时,如果你更新第一个数字,SUM 也会自动更新。

JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容:

  1. let val1 = 2
  2. let val2 = 3
  3. let sum = val1 + val2
  4. console.log(sum) // 5
  5. val1 = 3
  6. console.log(sum) // 仍然是 5
  7. 复制代码

如果我们更新第一个值,sum 不会被修改。

那么我们如何用 JavaScript 实现这一点呢?

我们这里直接看 @vue/reactive 的测试用例,来看看怎么使用,才会做到响应性的效果

ref 的测试用例

it 包裹的是测试用例的具体内容,我们只需要关注回调里面的代码即可。

  1. it('should be reactive', () => {
  2. const a = ref(1)
  3. let dummy
  4. let calls = 0
  5. effect(() => {
  6. calls++
  7. dummy = a.value
  8. })
  9. expect(calls).toBe(1)
  10. expect(dummy).toBe(1)
  11. a.value = 2
  12. expect(calls).toBe(2)
  13. expect(dummy).toBe(2)
  14. // same value should not trigger
  15. a.value = 2
  16. expect(calls).toBe(2)
  17. expect(dummy).toBe(2)
  18. })
  19. 复制代码

我们从测试用例中,可以看出有以下几点结论:

  1. 被 effect 包裹的函数,会自动执行一次。

  2. 被 effect 函数包裹的函数体,拥有了响应性 —— 当 effect 内的函数中的 ref 对象 a.value 被修改时,该函数会自动重新执行。

  3. 当 a.value 被设置成同一个值时,函数并不会自动的重新执行

effect 是什么?

官方文档中的描述:Vue 通过一个副作用 (effect) 来跟踪函数。副作用是一个函数的包裹器,在函数被调用之前就启动跟踪。Vue 知道哪个副作用在何时运行,并能在需要时再次执行它。

简单地说,要使一个函数拥有响应性,就应该将它包裹在(传入)effect 函数里。

那么这里也可以稍微猜一下,如果有这么一个 updateDom 函数:

  1. const a_ref = ref('aaaa')
  2. function updateDom(){
  3. return document.body.innerText = a_ref.value
  4. }
  5. effect(updateDom)
  6. setTimeout(()=>{
  7. a_ref.value = 'bbb'
  8. },1000)
  9. 复制代码

只要用 effect 包裹一下,当 a_ref.value 改变,就会自动设置 document.body.innerText,从而更新界面。

(当然这里也只是猜一下,实际上基本的原理,也与这个差不多,但会复杂很多。由于本文篇幅优先,并没有涉及到这部分)

依赖收集和触发更新

要实现响应性,就需要在合适的时机,再次执行副作用 effect。如何确定这个合适的时机?就需要依赖收集(英文术语:track)和触发更新(英文术语:trigger)

仍然看这个测试用例的例子

  1. it('should be reactive', () => {
  2. const a = ref(1)
  3. let dummy
  4. let calls = 0
  5. effect(() => {
  6. calls++
  7. dummy = a.value
  8. })
  9. expect(calls).toBe(1)
  10. expect(dummy).toBe(1)
  11. a.value = 2
  12. expect(calls).toBe(2)
  13. expect(dummy).toBe(2)
  14. // same value should not trigger
  15. a.value = 2
  16. expect(calls).toBe(2)
  17. expect(dummy).toBe(2)
  18. })
  19. 复制代码

我们已经知道,effect 包裹的函数,要在合适的时机被再次执行,那么在这个例子中,合适的时机就是,a.value 这个 ref 对象被修改。

由于副作用函数,使用了 a.value,因此副作用函数,依赖 a 这个 ref 变量。我们应该把这个依赖记录下来。

假如是自己实现,可以这么写:

  1. const a = {
  2. // 当 a 被访问时,可以将副作用函数存储在 a 对象的 dependency 属性中,实际上 @vue/reactivity 会稍微复杂一点
  3. get value(){
  4. const fn = // 假设有办法拿到 effect 的副作用函数
  5. // fn 就是以下这个函数
  6. // () => {
  7. // calls++
  8. // dummy = a.value
  9. // })
  10. a.dependence = fn
  11. }
  12. // 当 a.value 被修改时,可以这么触发更新
  13. set value(){
  14. this.dependence()
  15. }
  16. }
  17. 复制代码

这样就可以做到,当 ref 被获取时,收集依赖(即将副作用函数保存起来);当 ref 被修改时,触发更新(即调用副作用函数)

当然这个实现非常简单,实际上还要考虑很多情况,例如:

  • 一个副作用函数,可能依赖多个 ref。如 computed,就可能依赖多个 ref,才能算出最终的值,因此依赖是一组的副作用函数。
  • 不是任何时候都收集依赖。仅仅在 effect 包裹的时候,才收集依赖
  • 一开始依赖 a 这个 ref 的,但后来不依赖了
  • ……

这些情况都是我们没有考虑进去的,那么,接下来,我们就看看真正的 ref 的实现

概念约定

在讲解源码前,我们这里先对一些概念进行约定:

  • 副作用对象:在接下来的源码解析中,特指 effect 函数内部创建的一个对象,类型为 ReactiveEffect(先记住有这么名字即可)。被收集依赖的实际对象。先介绍这么多,后面还会有详细介绍
  • 副作用函数:在接下来的源码解析中,特指传入 effect 的函数,也是被触发再次执行的函数。
  1. effect(() => {
  2. calls++
  3. dummy = a.value
  4. })
  5. 复制代码
  • 响应式变量:ref、reactive、computed 等函数返回的变量。
  • track:收集依赖
  • trigger:触发更新
  • 副作用对象依赖响应式变量。如:ReactiveEffect 依赖某个 ref
  • 响应式变量,拥有多个依赖,依赖的值副作用对象。如: 某个 ref 拥有(收集到) n 个 ReactiveEffect 依赖

ref 源码解析

通过 ref 的实现,看依赖是什么,是怎么被收集的

ref 对象的实现

  1. export function ref(value?: unknown) {
  2. return createRef(value)
  3. }
  4. // shallowRef,只是将 createRef 的第二个参数 shallow,标记为 true
  5. export function shallowRef(value?: unknown) {
  6. return createRef(value, true)
  7. }
  8. function createRef(rawValue: unknown, shallow = false) {
  9. // 如果已经是ref,则直接返回
  10. if (isRef(rawValue)) {
  11. return rawValue
  12. }
  13. return new RefImpl(rawValue, shallow)
  14. }
  15. 复制代码

ref 和 shallowRef, 本质都是 RefImpl 对象实例,只是 shallow 属性不同

为了便于理解,我们可以只关注 ref 的实现,即默认 shallow === false

接下来,我们看看 RefImpl 是什么

  1. class RefImpl<T> {
  2. private _value: T
  3. private _rawValue: T
  4. // 用于存储依赖的副作用函数
  5. public dep?: Dep = undefined
  6. public readonly __v_isRef = true
  7. constructor(value: T, public readonly _shallow = false) {
  8. // 保存原始 value 到 _rawValue
  9. this._rawValue = _shallow ? value : toRaw(value)
  10. // convert函数的作用是,如果 value 是对象,则使用 reactive(value) 处理,否则返回value
  11. // 因此,将一个对象传入 ref,实际上也是调用了 reactive
  12. this._value = _shallow ? value : convert(value)
  13. }
  14. get value() {
  15. // 收集依赖
  16. trackRefValue(this)
  17. return this._value
  18. }
  19. set value(newVal) {
  20. newVal = this._shallow ? newVal : toRaw(newVal)
  21. // 如果值改变,才会触发依赖
  22. if (hasChanged(newVal, this._rawValue)) {
  23. this._rawValue = newVal
  24. this._value = this._shallow ? newVal : convert(newVal)
  25. // 触发依赖
  26. triggerRefValue(this, newVal)
  27. }
  28. }
  29. }
  30. 复制代码

在 RefImpl 对象中

  • getter 获取 value 属性时,trace 收集依赖
  • setter 设置 value 属性时,trigger 触发依赖

因此,只有访问/修改 ref 的 value 属性,才会收集/触发依赖

依赖是怎么被收集的

  1. export function trackRefValue(ref: RefBase<any>) {
  2. // 判断是否需要收集依赖
  3. if (isTracking()) {
  4. ref = toRaw(ref)
  5. // 如果没有 dep 属性,则初始化 dep,dep 是一个 Set<ReactiveEffect>,存储副作用函数
  6. if (!ref.dep) {
  7. ref.dep = createDep()
  8. }
  9. // 收集 effect 依赖
  10. trackEffects(ref.dep)
  11. }
  12. }
  13. // 判断是否需要收集依赖
  14. export function isTracking() {
  15. // shouldTrack 是一个全局变量,代表当前是否需要 track 收集依赖
  16. // activeEffect 也是个全局变量,代表当前的副作用对象 ReactiveEffect
  17. return shouldTrack && activeEffect !== undefined
  18. }
  19. 复制代码

为什么需要使用 isTracking,来判断是否收集依赖?

不是任何情况 ref 被访问时,都需要收集依赖。例如:

  • 没有被 effect 包裹时,由于没有副作用函数(即没有依赖,activeEffect === undefined),不应该收集依赖
  • 某些特殊情况,即使包裹在 effect,也不应该收集依赖(即 shouldTrack === false)。如:组件生命周期执行、组件 setup 执行

ref.dep 有什么作用?

ref.dep 的类型是Set<ReactiveEffect> ,关于 ReactiveEffect 的细节会在后面详细阐述

ref.dep 用于存储副作用对象,这些副作用对象,依赖该 ref,ref 被修改时就会触发

我们再来看看 trackEffects:

  1. // 代表当前的副作用 effect
  2. let activeEffect: ReactiveEffect | undefined
  3. export function trackEffects(
  4. dep: Dep
  5. ) {
  6. // 这个是局部变量的 shouldTrack,跟上一部分的全局 shouldTrack 不一样
  7. let shouldTrack = false
  8. // 已经 track 收集过依赖,就可以跳过了
  9. shouldTrack = !dep.has(activeEffect!)
  10. if (shouldTrack) {
  11. // 收集依赖,将 effect 存储到 dep
  12. dep.add(activeEffect!)
  13. // 同时 effect 也记录一下 dep
  14. // 用于 trigger 触发 effect 后,删除 dep 里面对应的 effect,即 dep.delete(activeEffect)
  15. activeEffect!.deps.push(dep)
  16. }
  17. }
  18. 复制代码

收集依赖,就是把 activeEffect(当前的副作用对象),保存到 ref.dep 中(当触发依赖时,遍历 ref.dep 执行 effect )

然后把 ref.dep,也保存到 effect.deps 中(用于在触发依赖后, ref.dep.delete(effect),双向删除依赖)

依赖是怎么被触发的

看完 track 收集依赖,那看看依赖是怎么被触发的

  1. export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  2. // ref 可能是 reactive 对象的某个属性的值
  3. // 这时候在 triggerRefValue(this, newVal) 时取 this,拿到的是一个 reactive 对象
  4. // 需要获取 Proxy 代理背后的真实值 ref 对象
  5. ref = toRaw(ref)
  6. // 有依赖才触发 effect
  7. if (ref.dep) {
  8. triggerEffects(ref.dep)
  9. }
  10. }
  11. 复制代码

再来看看 triggerEffects

  1. export function triggerEffects(
  2. dep: Dep | ReactiveEffect[]
  3. ) {
  4. // 循环遍历 dep,去取每个依赖的副作用对象 ReactiveEffect
  5. for (const effect of isArray(dep) ? dep : [...dep]) {
  6. // 默认不允许递归,即当前 effect 副作用函数,如果递归触发当前 effect,会被忽略
  7. if (effect !== activeEffect || effect.allowRecurse) {
  8. // effect.scheduler可以先不管,ref 和 reactive 都没有
  9. if (effect.scheduler) {
  10. effect.scheduler()
  11. } else {
  12. // 执行 effect 的副作用函数
  13. effect.run()
  14. }
  15. }
  16. }
  17. }
  18. 复制代码

这里省略了一些代码,这样结构更清晰。

当 ref 被修改时,会 trigger 触发依赖,即执行了 ref.dep 里的所有副作用函数(effect.run 运行副作用函数)

为什么默认不允许递归?

  1. const foo = ref([])
  2. effect(()=>{
  3. foo.value.push(1)
  4. })
  5. 复制代码

在这个副作用函数中,即会使用到 foo.value(getter 收集依赖),又会修改 foo 数组(触发依赖)。如果允许递归,会无限循环。

至此,ref 依赖收集和触发的逻辑,已经比较清晰了。

那么,接下来,我们需要进一步了解的是,effect 函数、ReactiveEffect 副作用对象、副作用函数,它们是什么,它们之间有什么关系?

effect 函数

我们来看一下 effect 的实现

  1. // 传入一个 fn 函数
  2. export function effect<T = any>(
  3. fn: () => T
  4. ){
  5. // 参数 fn,可能也是一个 effect,所以要获取到最初始的 fn 参数
  6. if ((fn as ReactiveEffectRunner).effect) {
  7. fn = (fn as ReactiveEffectRunner).effect.fn
  8. }
  9. // 创建 ReactiveEffect 对象
  10. const _effect = new ReactiveEffect(fn)
  11. _effect.run()
  12. const runner = _effect.run.bind(_effect)
  13. runner.effect = _effect
  14. return runner
  15. }
  16. 复制代码

effect 函数接受一个函数作为参数,该函数,我们称之为副作用函数

effect 函数内部,会创建 ReactiveEffect 对象,我们称之为副作用对象

effect 函数,返回一个 runner,是一个函数,直接调用就是调用副作用函数;runner 的属性 effect,保存着它对应的 ReactiveEffect 对象 。

因此,它们的关系如下:

effect 函数的入参为副作用函数,在 effect 函数内部会创建副作用对象

我们继续深入看看 ReactiveEffect 对象的实现

ReactiveEffect 副作用对象

该部分(effect.run 函数)代码有比较大的删减,点击查看未删减的源码

为什么要删减这部分代码?

在 vue 3.2 版本以后,effect.run 做了优化,提升性能,其中涉及到位运算。

优化方案在极端的情况下(effect 非常多次嵌套),会降级到原来的老方案(优化前,3.2版本前的方案)

因此,为了便于理解,我这里先介绍优化前的方案,深入了解,并阐述该方案的缺点, 以便更好地理解为什么需要进行优化。

删减部分为优化后的方案,这部分的方案会在下一小节进行介绍。

下面是 ReactiveEffect 代码解析:

  1. // 全局公用的 effect 栈,由于可以 effect 嵌套,因此需要用栈保存 ReactiveEffect 副作用对象
  2. const effectStack: ReactiveEffect[] = []
  3. export class ReactiveEffect<T = any> {
  4. active = true
  5. // 存储 Dep 对象,如上一小节的 ref.dep
  6. deps: Dep[] = []
  7. constructor(
  8. public fn: () => T,
  9. public scheduler: EffectScheduler | null = null,
  10. scope?: EffectScope | null
  11. ) {
  12. // 可以暂时不看,与 effectScope API 相关 https://v3.cn.vuejs.org/api/effect-scope.html#effectscope
  13. // 将当前 ReactiveEffect 副作用对象,记录到 effectScope 中
  14. // 当 effectScope.stop() 被调用时,所有的 ReactiveEffect 对象都会被 stop
  15. recordEffectScope(this, scope)
  16. }
  17. run() {
  18. // 如果当前 ReactiveEffect 副作用对象,已经在栈里了,就不需要再处理了
  19. if (!effectStack.includes(this)) {
  20. try {
  21. // 保存上一个的 activeEffect,因为 effect 可以嵌套
  22. effectStack.push((activeEffect = this))
  23. // 开启 shouldTrack 开关,缓存上一个值
  24. enableTracking()
  25. // 在该 effect 所在的所有 dep 中,清除 effect,下面会详细阐述
  26. cleanupEffect(this)
  27. // 执行副作用函数,执行过程中,又会 track 当前的 effect 进来,依赖重新被收集
  28. return this.fn()
  29. } finally {
  30. // 关闭shouldTrack开关,恢复上一个值
  31. resetTracking()
  32. // 恢复上一个的 activeEffect
  33. effectStack.pop()
  34. const n = effectStack.length
  35. activeEffect = n > 0 ? effectStack[n - 1] : undefined
  36. }
  37. }
  38. }
  39. }
  40. // 允许 track
  41. export function enableTracking() {
  42. // trackStack 是个全局的栈,由于 effect 可以嵌套,所以是否 track 的标记,也需要用栈保存
  43. trackStack.push(shouldTrack)
  44. // 打开全局 shouldTrack 开关
  45. shouldTrack = true
  46. }
  47. // 重置上一个 track 状态
  48. export function resetTracking() {
  49. const last = trackStack.pop()
  50. // 恢复上一个 track 状态
  51. shouldTrack = last === undefined ? true : last
  52. }
  53. 复制代码

为什么要用栈保存 effect 和 track 状态?

因为effect可能会嵌套,需要保存之前的状态,effect执行完成后恢复

cleanupEffect 做了什么?

回顾下图:

effect.deps,也存储着响应式变量的 dep(dep 是一个依赖集合, ReactiveEffect 对象的集合),目的是在effect 执行后,在所有的 dep 中删除当前执行过的 effect,双向删除

删除代码如下:

  1. function cleanupEffect(effect: ReactiveEffect) {
  2. const { deps } = effect
  3. if (deps.length) {
  4. for (let i = 0; i < deps.length; i++) {
  5. //ref.dep 中删除 ReactiveEffect
  6. deps[i].delete(effect)
  7. }
  8. // 从 ReactiveEffect.deps 中删除 dep
  9. deps.length = 0
  10. }
  11. }
  12. 复制代码

删除的 ReactiveEffect 如何被重新收集?

在 cleanupEffect 中,在各个 dep 中,删除该 ReactiveEffect 对象。

在执行 this.fn() 时,执行副作用函数,副作用函数的执行中,当使用到响应式变量(如 ref.value)时,又会 trackEffect,重新收集依赖

为什么要先删除,再重新收集依赖?

因为执行前后的依赖可能不一致,考虑一下情况:

  1. const switch = ref(true)
  2. const foo = ref('foo')
  3. effect( () = {
  4. if(switch.value){
  5. console.log(foo.value)
  6. }else{
  7. console.log('else condition')
  8. }
  9. })
  10. switch.value = false
  11. 复制代码

当 switch 为 true 时,triggerEffect,双向删除后,执行副作用函数,switch、foo 会重新收集到依赖 effect

当 switch 变成 false 后,triggerEffect,双向删除后,执行副作用函数,仅有 switch 能重新收集到依赖 effect

由于 effect 副作用函数执行前后,依赖的响应式变量(这里是 ref )可能不一致,因此 vue 会先删除全部依赖,再重新收集

细心的你,可能会发现:自己写 vue 代码时,很少会出现前后依赖不一致的情况。那既然这样,删除全部依赖这个实现就有优化的空间,能不能只删除失效的依赖呢

依赖更新算法优化

该优化是 vue 3.2 版本引入的,原因即上一小节所说的,可以只删除失效的依赖。并且在极端的嵌套深度下,能够降级到 cleanupEffect 方法,对所有依赖进行删除。

先想想,假如是自己实现,要怎么写好呢?

  1. 不使用 cleanupEffect 删除所有依赖
  2. 执行副作用函数前,给 ReactiveEffect 依赖的响应式变量,加上 was 的标记(was 是 vue 给的名称,过去的意思)
  3. 执行 this.fn()track 重新收集依赖时,给 ReactiveEffect 的每个依赖,加上 new 的标记
  4. 最后,对失效(有 was 但是没有 new)依赖进行删除

为什么是标记在响应式对象,而不是 ReactiveEffect ?

再回顾一下响应式变量和 ReactiveEffect 的关系:

ReactiveEffect 依赖响应式变量(ref),响应式变量(ref)拥有多个 ReactiveEffect 依赖

只删除失效的依赖。就要确定哪些依赖(响应式变量)需要被删除(实际上是响应式变量的 dep 被删除)

因此,需要在响应式变量上做标记,对已经不依赖的响应式变量,将它们的 dep,从 ReactiveEffect.deps 中删除

如何给响应式变量做标记

实现如下:

  1. export const initDepMarkers = ({ deps }: ReactiveEffect) => {
  2. if (deps.length) {
  3. // 循环 deps,对每个 dep 进行标记
  4. for (let i = 0; i < deps.length; i++) {
  5. // 标记 dep 为 was,w 是 was 的意思
  6. deps[i].w |= trackOpBit
  7. }
  8. }
  9. }
  10. 复制代码

这部分代码其实比较难理解,尤其是使用了位运算符,如果一开始就解析这些代码的话,很容易就劝退了。

下面我们对问题进行分析:

为什么这里标记的是 dep?

这里的 dep,对于 ref,就是 ref.dep,它是一个 Set<ReactiveEffect>

dep 跟 ref 的关系是一一对应的,一个 ref仅仅有一个 dep,因此,标记在 dep 和 标记在 ref,是等价的

那为什么不在响应式变量上标记呢?

因为响应式变量的类型有几种:ref、computed、reactive,它们都使用 dep 对象存储依赖,对它们都有的 dep 对象进行标记,可以将标记代码更好的进行复用(否则要判断不同的类型,执行不同的标记逻辑)。

如果未来新增一种响应式变量,只需要也是用 dep 进行存储依赖即可

这个按位与位运算的作用是什么?

先来看看 dep 的真实结构,它其实还有两个属性 w 和 n:

  1. export type Dep = Set<ReactiveEffect> & TrackedMarkers
  2. type TrackedMarkers = {
  3. /**
  4. * wasTracked,代表副作用函数执行前被 track 过
  5. */
  6. w: number
  7. /**
  8. * newTracked,代表副作用函数执行后被 track
  9. */
  10. n: number
  11. }
  12. 复制代码

那这个 w 和 n 是怎么做标记的?我们先来看看位运算做了什么,不了解位运算的同学 ,可以先看看这里的介绍

  1. dep.w |= trackOpBit // 即 dep.w = dep.w | trackOpBit
  2. 复制代码

将响应式变量标记,就是将对应整数的二进制位,设置成 1

dep.n 的标记方法也是如此。

为什么要使用位运算?

  1. 位运算速度快
  2. 只需要使用一个 number 类型的数据,就能存储不同深度的标记(was / new)

如果不使用位运算,需要实现同样的标记能力,需要用数组存储不同深度的标记,数据结构如下:

  1. export type Dep = Set<ReactiveEffect> & TrackedMarkers
  2. type TrackedMarkers = {
  3. /**
  4. * wasTrackedList,代表副作用函数执行前被 track 过
  5. * 设计为数组,是因为 effect 可以嵌套,代表响应式变量在所在的 effect 深度(嵌套层级)中是否被 track
  6. */
  7. wasTrackedList: boolean[]
  8. /**
  9. * newTracked,代表副作用函数执行后被 track
  10. * 设计为数组,是因为 effect 可以嵌套,代表响应式变量在所在的 effect 深度(嵌套层级)中是否被 track
  11. */
  12. newTrackedList: boolean[]
  13. }
  14. 复制代码

使用数组存储标记位,修改处理没有直接位运算快。由于 vue 每次执行副作用函数(一个页面有非常多的副作用函数),都需要频繁进行标记,这开销也是非常大的。因此,这里使用了运算符,提升了标记的速度,也节省了运行内存

trackOpBit 是什么?

trackOpBit 是代表当前操作的位,它是由 effect 嵌套深度决定的。

  1. // 全局变量嵌套深度一开始为 0
  2. effectTrackDepth = 0
  3. // 每次执行 effect 副作用函数前,全局变量嵌套深度会自增 1,执行完成 effect 副作用函数后会自减
  4. trackOpBit = 1 << ++effectTrackDepth
  5. 复制代码

当深度为 1 时,trackOpBit 是 2(二进制:00000010),操作的是第二位,将 dep.w 的第二位变成 1

因此如图所说,dep.w 的第一位是不使用的

为什么最大标记嵌套深度为 30?

从图中我们可以看到,深度受存储类型的位数限制,否则就会溢出

在JavaScript内部,数值都是以64位浮点数的形式储存,但是做位运算的时候,是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数

  1. 1 << 30
  2. // 1073741824
  3. 1 << 31
  4. // -2147483648,溢出
  5. 复制代码

因此,深度最大为 30,超过 30,则需要降级方案,使用全部清除再全部重新收集依赖的方案

判断响应式变量是否被标记

  1. export const wasTracked = (dep: Dep): boolean => (dep.w & trackOpBit) > 0
  2. export const newTracked = (dep: Dep): boolean => (dep.n & trackOpBit) > 0
  3. 复制代码

使用 wasTrackednewTracked 判断 dep 是否在当前深度被标记

trackOpBit 是一个全局变量,根据当前深度生成的

如图,如果需要判断深度为 2 时(trackOpBit 第 3 位为 1),是否被标记,仅当 dep.w 的第 3 位为 1 时, wasTrackednewTracked 才会返回 true

vue 通过这样巧妙的位运算,快速算出依赖在当前深度是否被标记

副作用对象的优化实现

  1. // 当前 effect 的嵌套深度,每次执行会 ++effectTrackDepth
  2. let effectTrackDepth = 0
  3. // 最大的 effect 嵌套层数为 30
  4. const maxMarkerBits = 30
  5. // 位运算操作的第 trackOpBit 位
  6. export let trackOpBit = 1
  7. export class ReactiveEffect<T = any> {
  8. run() {
  9. if (!effectStack.includes(this)) {
  10. try {
  11. // 省略代码: 保存上一个 activeEffect
  12. // trackOpBit: 根据深度生成 trackOpBit
  13. trackOpBit = 1 << ++effectTrackDepth
  14. // maxMarkerBits: 可支持的最大嵌套深度,为 30
  15. // 这里就是之前说到的,正常情况下使用优化方案,极端嵌套场景下,使用降级方案
  16. if (effectTrackDepth <= maxMarkerBits) {
  17. // 标记所有的 dep 为 was
  18. initDepMarkers(this)
  19. } else {
  20. // 降级方案,删除所有的依赖,再重新收集
  21. cleanupEffect(this)
  22. }
  23. // 执行过程中标记新的 dep 为 new
  24. return this.fn()
  25. } finally {
  26. if (effectTrackDepth <= maxMarkerBits) {
  27. // 对失效依赖进行删除
  28. finalizeDepMarkers(this)
  29. }
  30. // 恢复上一次的状态
  31. // 嵌套深度 effectTrackDepth 自减
  32. // 重置操作的位数
  33. trackOpBit = 1 << --effectTrackDepth
  34. // 省略代码: 恢复上一个 activeEffect
  35. }
  36. }
  37. }
  38. }
  39. 复制代码

整体的思路如下:

  • 如果当前深度不超过 30,使用优化方案

    1. 执行副作用函数前,给 ReactiveEffect 依赖的响应式变量,加上 was 的标记(was 是 vue 给的名称,表示过去依赖)
    2. 执行 this.fn()track 重新收集依赖时,给 ReactiveEffect 的每个依赖,加上 new 的标记
    3. 对失效依赖进行删除(有 was 但是没有 new)
    4. 恢复上一个深度的状态
  • 如果深度超过 30 ,超过部分,使用降级方案

    1. 双向删除 ReactiveEffect 副作用对象的所有依赖(effect.deps.length = 0)
    2. 执行 this.fn()track 重新收集依赖时
    3. 恢复上一个深度的状态

标记 ReactiveEffect 的所有的 dep 为 was 的实现:

  1. export const initDepMarkers = ({ deps }: ReactiveEffect) => {
  2. if (deps.length) {
  3. for (let i = 0; i < deps.length; i++) {
  4. deps[i].w |= trackOpBit // 遍历每个 dep 标记为 was
  5. }
  6. }
  7. }
  8. 复制代码

对失效依赖进行删除的实现如下(有 was 但是没有 new):

  1. export const finalizeDepMarkers = (effect: ReactiveEffect) => {
  2. const { deps } = effect
  3. if (deps.length) {
  4. let ptr = 0
  5. for (let i = 0; i < deps.length; i++) {
  6. const dep = deps[i]
  7. //有 was 标记但是没有 new 标记,应当删除
  8. if (wasTracked(dep) && !newTracked(dep)) {
  9. dep.delete(effect)
  10. } else {
  11. // 需要保留的依赖,放到数据的较前位置,因为在最后会删除较后位置的所有依赖
  12. deps[ptr++] = dep
  13. }
  14. // 清理 was 和 new 标记,将它们对应深度的 bit,置为 0
  15. dep.w &= ~trackOpBit
  16. dep.n &= ~trackOpBit
  17. }
  18. // 删除依赖,只保留需要的
  19. deps.length = ptr
  20. }
  21. }
  22. 复制代码

参考文章

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号