阅读 4765

Vue3最啰嗦的Reactivity数据响应式原理解析

image.png

基本差不多了,图有点小丑,也可以看别人比较全的图。@mxin

image.png

前言

好久没有接触Vue了,在前几天观看尤大的直播时谈论对于看源码的一些看法,是为了更好的上手vue?还是想要学习内部的框架思想?

image.png

国内前端:面试,面试会问。

在大环境下似乎已经卷到了只要你是开发者,那么必然需要去学习源码,不论你是实习生,还是应届生,或者是多年经验的老前端。

如果你停滞下来,不跟着卷,那么忽然之间带来的压力就会将你冲垮,以至于你可能很难在内卷的环境下生存下去,哪怕你是对的。

有兴趣的话可以阅读一下@掘金泥石流大佬的写的程序员焦虑程度自测表

似乎讲了太多的题外话,与其发牢骚不如静下心来,一起学习一下Reactivity的一些基本原理吧,相信阅读完文章的你会对vue 3数据响应式有更加深刻的理解。

而之所以选择Reactivity模块来说,是因为其耦合度较低,且是vue3.0核心模块之一,性价比成本非常高。

基础篇

在开始之前,如果不了解ES6出现的一些高阶api,如,Proxy, Reflect, WeakMap, WeakSet,Map, Set等等可以自行翻阅到资源章节,先了解前置知识点在重新观看为最佳。

Proxy

@vue/reactivity中,Proxy是整个调度的基石。

通过Proxy代理对象,才能够在get, set方法中完成后续的事情,比如依赖收集effecttrack, trigger等等操作,在这里就不详细展开,后续会详细展开叙述。

如果有同学迫不及待,加上天资聪慧,ES6有一定基础,可以直接跳转到原理篇进行观看和思考。

先来手写一个简单的Proxy。在其中handleCallback中写了了set, get两个方法,又来拦截当前属性值变化的数据监听。先上代码:

const user = {
  name: 'wangly19',
  age: 22,
  description: '一名掉头发微乎其微的前端小哥。'
}

const userProxy = new Proxy(user, {
  get(target, key) {
    console.log(`userProxy: 当前获取key为${key}`)
    if (target.hasOwnProperty(key)) return target[key]
    return {
    }
  },
  set(target, key, value) {
    console.log(`userProxy: 当前设置值key为${key}, value为${value}`)
    let isWriteSuccess = false
    if (target.hasOwnProperty(key)) {
      target[key] = value
      isWriteSuccess = true
    }
    return isWriteSuccess
  }
})

console.log('myNaame', userProxy.name)

userProxy.age = 23
复制代码

当我们在对值去进行赋值修改和打印的时候,分别触发了当前的setget方法。

这一点非常重要,对于其他的一些属性和使用方法在这里就不过多的赘述,

image.png

Reflect

Reflect并不是一个类,是一个内置的对象。这一点呢大家要知悉,不要直接实例化(new)使用,它的功能比较和Proxyhandles有点类似,在这一点基础上又添加了很多Object的方法。

在这里我们不去深究Reflect,如果想要深入了解功能的同学,可以在后续资源中找到对应地址进行学习。在本章主要介绍了通过Reflect安全的操作对象。

image.png

以下是对user对象的一些修改操作的实例,可以参考一下,在后续可能会用到。

const user = {
  name: 'wangly19',
  age: 22,
  description: '一名掉头发微乎其微的前端小哥。'
}

console.log('change age before' , Reflect.get(user, 'age'))

const hasChange = Reflect.set(user, 'age', 23)
console.log('set user age is done? ', hasChange ? 'yes' : 'no')

console.log('change age after' , Reflect.get(user, 'age'))

const hasDelete = Reflect.deleteProperty(user, 'age')

console.log('delete user age is done?', hasDelete ? 'yes' : 'none')

console.log('delete age after' , Reflect.get(user, 'age'))
复制代码

image.png

原理篇

当了解了前置的一些知识后,就要开始@vue/reactivity的源码解析篇章了。下面开始会以简单的思路来实现一个基础的reactivity,当你了解其本质原理后,你会对@vue/reactivity依赖收集(track)触发更新(trigger),以及副作用(effect)究竟是什么工作。

reactive

reactivevue3中用于生成引用类型api

const user = reactive({
  name: 'wangly19',
  age: 22,
  description: '一名掉头发微乎其微的前端小哥。'
})
复制代码

那么往函数内部看看,reactive方法究竟做了什么?

在内部,对传入的对象进行了一个target的只读判断,如果你传入的target是一个只读代理的话,会直接返回掉。对于正常进行reactive的话则是返回了createReactiveObject方法的值。

export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}
复制代码

createReactiveObject

createReactiveObject中,做的事情就是为target添加一个proxy代理。这是其核心,reactive最终拿到的是一个proxy代理,参考Proxy章节的简单事例就可以知道reactive是如何进行工作的了,那么在来看下createReactiveObject做了一些什么事情。

首先先判断当前target的类型,如果不符合要求,直接抛出警告并且返回原来的值。

if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
复制代码

其次判断当前对象是否已经被代理且并不是只读的,那么本身就是一个代理对象,那么就没有必要再去进行代理了,直接将其当作返回值返回,避免重复代理。

if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
复制代码

对于这些判断代码来说,阅读起来并不是很困难,注意if ()中判断的条件,看看它做了一些什么动作即可。而createReactiveObject做的最重要的事情就是创建targetproxy, 并将其放到Map中记录。

而比较有意思的是其中对传入的target调用了不同的proxy handle。那么就一起来看看handles中究竟干了一些什么吧。

const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
复制代码

handles的类型

在对象类型中,将ObjectArrayMap,Set, WeakMap,WeakSet区分开来了。它们调用的是不同的Proxy Handle

  • baseHandlers.tsObject & Array会调用此文件下的mutableHandlers对象作为Proxy Handle
  • collectionHandlers.tsMap,Set, WeakMap,WeakSet会调用此文件下的mutableCollectionHandlers对象作为Proxy Handle
/**
 * 对象类型判断
 * @lineNumber 41
 */
function targetTypeMap(rawType: string) {
  switch (rawType) {
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}
复制代码

会在new Proxy的根据返回的targetType判断。

const proxy = new Proxy(
  target,
  targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)
复制代码

由于篇幅有限,下文中只举例mutableHandlers当作分析的参考。当理解mutableHandlers后对于collectionHandlers只是时间的问题。

Proxy Handle

在上面说到了根据不同的Type调用不同的handle,那么一起来看看mutableHandlers究竟做了什么吧。

在基础篇中,都知道Proxy可以接收一个配置对象,其中我们演示了getset的属性方法。而mutableHandlers就是何其相同意义的事情,在内部分别定义get, set, deleteProperty, has, oneKeys等多个属性参数,如果不知道什么含义的话,可以看下Proxy Mdn。在这里你需要理解被监听的数据 只要发生增查删改后,绝大多数都会进入到对应的回执通道里面。

image.png

在这里,我们用简单的get, set来进行简单的模拟实例。

function createGetter () {
    return (target, key, receiver) => {
      const result = Reflect.get(target, key, receiver)
      track(target, key)
      return result
    }
}

const get = /*#__PURE__*/ createGetter()

function createSetter () {
  
  return (target, key, value, receiver) => {
    const oldValue = target[key]
  const result = Reflect.set(target, key, value, receiver)
  if (result && oldValue != value) {
    trigger(target, key)
  }
  return result
  }
}
复制代码

get的时候会进行一个track的依赖收集,而set的时候则是触发trigger的触发机制。在vue3,而triggertrack的话都是在我们effect.ts当中声明的,那么接下来就来看看依赖收集响应触发究竟做了一些什么吧。

Effect

对于整个effect模块,将其分为三个部分来去阅读:

  • effect: 副作用函数
  • teack: 依赖收集,在proxy代理数据get时调用
  • trigger: 触发响应,在proxy代理数据发生变化的时候调用。

effect

通过一段实例来看下effect的使用,并且了解它主要参数是一个函数。在函数内部会帮你执行一些副作用记录和特性判断。

effect(() => {
    proxy.user = 1
})
复制代码

来看看vueeffect干了什么?

在这里,首先判断当前参数fn是否是一个effect,如果是的话就将raw中存放的fn进行替换。然后重新进行createReactiveEffect生成。

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

复制代码

createReactiveEffect会将我们effect推入到effectStack中进行入栈操作,然后用activeEffect进行存取当前执行的effect,在执行完后会将其进行出栈。同时替换activeEffect为新的栈顶。

而在effect执行的过程中就会触发proxy handle然后tracktrigger两个关键的函数。

function createReactiveEffect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn()
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        effectStack.push(effect)
        activeEffect = effect
        return fn()
      } finally {
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect.allowRecurse = !!options.allowRecurse
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}
复制代码

来看一个简版的effect,抛开大多数代码包袱,下面的代码是不是清晰很多。

function effect(eff) {
  try {
    effectStack.push(eff)
    activeEffect = eff
    return eff(...argsument)
    
  } finally {
    effectStack.pop()
    activeEffect = effectStack[effectStack.length  - 1]
  }
}
复制代码

track(依赖收集)

track的时候,会进行我们所熟知的依赖收集,会将当前activeEffect添加到dep里面,而说起这一类的关系。它会有一个一对多对多的关系。

image.png

从代码看也非常的清晰,首先我们会有一个一个总的targetMap它是一个WeakMapkeytarget(代理的对象), value是一个Map,称之为depsMap,它是用于管理当前target中每个keydeps也就是副作用依赖,也就是以前熟知的depend。在vue3中是通过Set来去实现的。

第一步先凭借当前target获取targetMap中的depsMap,如果不存在就进行targetMap.set(target, (depsMap = new Map()))初始化声明,其次就是从depsMap中拿当前keydeps,如果没有找到的话,同样是使用depsMap.set(key, (dep = new Set()))进行初始化声明,最后将当前activeEffect推入到deps,进行依赖收集。

    1. targetMap中找target
    1. depsMap中找key
    1. activeEffect保存到dep里面。

这样的话就会形成一个一对多对多的结构模式,里面存放的是所有被proxy劫持的依赖。

function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}
复制代码

trigger(响应触发)

trigger的时候,做的事情其实就是触发当前响应依赖的执行。

首先,需要获取当前key下所有渠道的deps,所以会看到有一个effectsadd函数, 做的事情非常的简单,就是来判断当前传入的depsMap的属性是否需要添加到effects里面,在这里的条件就是effect不能是当前的activeEffecteffect.allowRecurse,来确保当前set key的依赖都进行执行。

const effects = new Set<ReactiveEffect>()
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        if (effect !== activeEffect || effect.allowRecurse) {
          effects.add(effect)
        }
      })
    }
  }
复制代码

下面下面熟知的场景就是判断当前传入的一些变化行为,最常见的就是在trigger中会传递的TriggerOpTypes行为,然后执行add方法将其将符合条件的effect添加到effects当中去,在这里@vue/reactivity做了很多数据就变异上的行为,如length变化。

然后根据不同的TriggerOpTypes进行depsMap的数据取出,最后放入effects。随后通过run方法将当前的effect执行,通过effects.forEach(run)进行执行。

if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
  } else if (key === 'length' && isArray(target)) {
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      add(depsMap.get(key))
    }

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
          add(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            add(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          add(depsMap.get('length'))
        }
        break
      case TriggerOpTypes.DELETE:
        if (!isArray(target)) {
          add(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            add(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          add(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }
复制代码

run又做了什么呢?

首先就是判断当前effectoptions下有没有scheduler,如果有的话就使用schedule来处理执行,反之直接直接执行effect()

if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
复制代码

将其缩短一点看处理逻辑,其实就是从targetMap中拿对应key的依赖。

const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach((effect) => {
      effect()
    })
  }
复制代码

Ref

众所周知,refvue3对普通类型的一个响应式数据声明。而获取ref的值需要通过ref.value的方式进行获取,很多人以为ref就是一个简单的reactive但其实不是。

在源码中,ref最终是调用一个createRef的方法,在其内部返回了RefImpl的实例。它与Proxy不同的是,ref的依赖收集和响应触发是在getter/setter当中,这一点可以参考图中demo形式,链接地址gettter/setter

export function ref<T extends object>(value: T): ToRef<T>
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}
复制代码

image.png

如图所示,vuegetter中与proxy中的get一样都调用了track收集依赖,在setter中进行_value值更改后调用trigger触发器。

class RefImpl<T> {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
    this._value = _shallow ? _rawValue : convert(_rawValue)
  }

  get value() {
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}
复制代码

那么你现在应该知道:

  • proxy handlereactive的原理,而ref的原理是getter/setter
  • get的时候都调用了trackset的时候都调用了trigger
  • effect是数据响应的核心。

Computed

computed一般有两种常见的用法, 一种是通过传入一个对象,内部有setget方法,这种属于ComputedOptions的形式。

export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>
): WritableComputedRef<T>
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
)
复制代码

而在内部会有getter / setter两个变量来进行保存。

getterOrOptions为函数的时候,会将其赋值给与getter

getterOrOptions为对象的时候,会将setget分别赋值给setter,getter

随后将其作为参数进行实例化ComputedRefImpl类,并将其当作返回值返回出去。

let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>

  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  
  return new ComputedRefImpl(
    getter,
    setter,
    isFunction(getterOrOptions) || !getterOrOptions.set
  ) as any
复制代码

那么ComputedRefImpl干了一些什么?

计算属性的源码,其实绝大多数是依赖前面对effect的一些理解。

首先,我们都知道,effect可以传递一个函数和一个对象options

在这里将getter当作函数参数传递,也就是副作用,而在options当中配置了lazyscheduler

lazy表示effect并不会立即被执行,而scheduler是在trigger中会判断你是否传入了scheduler,传入后就执行scheduler方法。

而在computed scheduler当中,会判断当前的_dirty是否为false,如果是的话会把_dirty设置为true,且执行trigger触发响应。

class ComputedRefImpl<T> {
  private _value!: T
  private _dirty = true

  public readonly effect: ReactiveEffect<T>

  public readonly __v_isRef = true;
  public readonly [ReactiveFlags.IS_READONLY]: boolean

  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean
  ) {
    this.effect = effect(getter, {
      lazy: true,
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true
          trigger(toRaw(this), TriggerOpTypes.SET, 'value')
        }
      }
    })

    this[ReactiveFlags.IS_READONLY] = isReadonly
  }
复制代码

而在getter/setter中会对_value进行不同操作。

首先,在get value中,判断当前._dirty是否为true,如果是的话执行缓存的effect并将其返回结果存放到_value,并执行track进行依赖收集。

其次,在set value中,则是调用_setter方法重新新值。

get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    const self = toRaw(this)
    if (self._dirty) {
      self._value = this.effect()
      self._dirty = false
    }
    track(self, TrackOpTypes.GET, 'value')
    return self._value
  }

  set value(newValue: T) {
    this._setter(newValue)
  }
复制代码

资源引用

下面是一些参考资源,有兴趣的小伙伴可以看下

总结

如果你使用vue的话强烈建议自己debug将这一块看完,绝对会对你写代码有很大的帮助。vue3如火如荼,目前已经有团队作用于生产环境进行项目开发,社区的生态也慢慢的发展起来。

@vue/reactivity的阅读难度并不高,也有很多优质的教程,有一定的工作基础和代码知识都能循序渐进的理解下来。 我个人其实并不需要将其理解的滚瓜烂熟,理解每一行代码的意思什么的,而是了解其核心思想,学习框架理念以及一些框架开发者代码写法的思路。这都是能够借鉴并将其吸收成为自己的知识。

对于一个已经转到React生态体系下的前端来说,读Vue的源码其实更多的是丰富自己在思维上的知识,而不是为了面试而去读的。正如同你背书不是为了考试,而是学习知识。在现在的环境下,很难做到这些事情,静下心来专心理解一件知识不如背几篇面经。

文章分类
前端
文章标签