petite-vue源码剖析-逐行解读@vue/reactivity之reactive

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？
@vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。

一切源于Proxy

我们知道Vue2是基于Object.defineProperty拦截对象属性的读写操作，从而实现依赖收集和响应式UI渲染。而@vue/reactivity作为Vue3的子项目，采用的是ES6的Proxy接口实现这一功能。

const state = {
  count: 1
}

const proxyState = new Proxy(state, {
  get(target: T, property: string, receiver?: T | Proxy): any {
    // 拦截读操作
    console.log('get')
    return Reflect.get(target, property, receiver)
  },
  set(target: T, property: string, value: any, receiver?: T | Proxy): boolean {
    // 拦截写操作
    console.log('set')
    return Reflect.set(target, property, value, receiver)
  },
  deleteProperty(target, prop) {
    // 拦截属性删除操作
    console.log('delete')
    delete target[prop]
    return true
  }
})

相对Object.defineProperty，Proxy的特点：

通过new Proxy构建的对象进行操作才能拦截对象属性的读写操作，而被代理的对象则没有任何变化；
可以监听数组元素的变化和增减；
可以监听对象属性的增减；
Proxy可以逐层代理对象属性，而Object.defineProperty则需要一次性代理对象所有层级的属性。

响应式编程

// 定义响应式对象
const state = reactive({
  num1: 1,
  num2: 2
})

// 在副作用函数中访问响应式对象属性，当这些属性发生变化时副作用函数将被自动调用
effect(() => {
  console.log('outer', state.num1)
  effect(() => {
    console.log('inner', state.num2)
  })
})
// 回显 outer 1
// 回显 inner 2

state.num2 += 1
// 回显 inner 3

state.num1 += 1
// 回显 outer 2
// 回显 inner 3

state.num2 += 1
// 回显 inner 4
// 回显 inner 4

本篇我们将从reactive入手，解读Vue3到底如何构造一个响应式对象。

深入`reactive`的工作原理

@vue/reactivity的源码位于vue-next项目的packages/reactivity下，而reactive函数则位于其下的src/reactive.ts文件中。该文件中除了包含reactive函数外，还包含如shallowReactive、readonly、shallowReadonly和其它帮助函数。
而reactive核心工作则是通过Proxy将一个普通的JavaScript对象转换为监控对象，拦截对象属性的读写删操作，并收集依赖该对象（属性）的副作用函数。大致流程如下：

通过reactive构造的响应式对象都会将被代理对象和响应式对象的映射关系保存在reactiveMap，防止重复生成响应式对象，优化性能;
当调用reactive后会对被代理对象进行检查，若不是只读对象、响应式对象、primitive value和reactiveMap中不存在则根据被代理对象的类型构造响应式对象
拦截读操作(get,has和ownKeys)时调用effect.ts中的track收集依赖
拦截写操作(set, deleteProperty)时调用effect.ts中的trigger触发副作用函数执行

下面我们一起逐行理解源码吧！

源码解读——`reactive`入口

// Vue3内部定义的对象特性标识
export const enum ReactiveFlags {
  SKIP = '__v_skip', // 标识该对象不被代理
  IS_REACTIVE = '__v_isReactive', // 标识该对象是响应式对象
  IS_READONLY = '__v_isReadonly', // 标识该对象为只读对象
  RAW = '__v_raw' // 指向被代理的JavaScript对象
}

// 响应式对象的接口
export interface Target {
  [ReactiveFlags.SKIP]?: boolean
  [ReactiveFlags.IS_REACTIVE]?: boolean
  [ReactiveFlags.IS_READONLY]?: boolean
  [ReactiveFlags.RAW]?: any // 用于指向被代理的JavaScript对象
}

// 用于缓存被代理对象和代理对象的关系，防止重复代理
export const reactiveMap = new WeakMap<Target, any>()

// 将被代理对象的处理方式分为不代理(INVALID)、普通对象和数组(COMMON)和Map、Set(COLLECTION)
const enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2,
}

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
  }
}

function getTargetType(value: Target) {
  // 若对象标记为跳过，或不可扩展则不代理该对象
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
    ? TargetType.INVALID
    // 根据类型决定处理方式
    : targetTypeMap(toRawType(value))
}

export function reative(target: object) {
  // 不拦截只读对象的读写删操作
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

function createReactiveObject (
  target: Target,
  isReadonly: boolean,
  beaseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // reactive函数入参必须是JavaScript对象或数组，若是primitive value则会直接返回primitive value
  if (!isObject(target)) {
    return target
  }
  /**
   * 1. 仅能对非响应式和非只读对象构造响应式对象
   * 2. 可以对非只读对象构造响应式对象
   */
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 若对象已被代理过，则直接返回对应的代理对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 根据被代理的对象类型决定采用哪种代理方式
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy (
    target,
    targetType == TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

可以看到reactive方法中会对被代理对象进行各种检查，从而减少不必要的操作提高性能。最后若被代理对象的类型为Object或Array则采用baseHandlers生成代理，否则使用collectionHandlers生成代理。

源码解读-代理`Object`和`Array`的`baseHandlers`

//文件 ./baseHandlers.ts

// /*#__PURE__*/用于告诉webpack等bundler工具后面紧跟的函数是纯函数，若没被调用过则可以采用tree-shaking移除掉该函数
const get = /*#__PURE__*/ createGetter()

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys,
}

我们首先看看是如何拦截读操作吧

拦截读操作

拦截读操作核心是收集依赖所读属性的辅作用函数的信息，具体流程逻辑是

对于Vue3内部属性的读操作，即返回对应的值而不用收集依赖
对于数组内置方法的读操作，需要改写这些内置方法用于在调用该方法前对数组元素进行依赖收集，或解决一些边界问题
对于内置Symbol属性和其它Vue3内部属性的读操作，直接返回原始值且不用收集依赖
对于非只读对象的除上述外的其余属性的读操作，执行依赖收集(核心逻辑)
若浅层响应式对象则直接返回属性值，否则若属性值为对象，则将其构造为响应式对象(reactive)或只读对象(readonly)

//文件 ./baseHandlers.ts

/**
 * isNonTrackableKeys = {'__proto__': true, '__v_isRef': true, '__isVue': true}
 */
const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`)

// 内置的Symbol实例包含：hasInstance, isConcatSpreadable, iterator, asyncIterator, match, matchAll, replace, search, split, toPrimitive, toStringTag, species, unscopables
const builtInSymbols = new Set(
  Object.getOwnPropertyNames(Symbol)
    .map(key => (Symbol as any)[key])
    .filter(isSymbol)
)

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    // 处理Vue3内部属性名(`__v_isReactive`, `__v_isReadonly`, `__v_raw`)的值
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    }
    else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    }
    else if (
      key === ReactiveFlags.RAW &&
      receiver === reactiveMap.get(target)
    ) {
      return target
    }

    // 如果key是includes,indexOf,lastIndexOf,push,pop,shift,unshift,splice时则返回能跟踪依赖变化的版本
    const targetIsArray = isArray(target)
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

    const res = Reflect.get(target, key, receiver)

    // 不拦截内置Symbol属性和__proto__,__v_isRef和__isVue属性
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 收集依赖该属性的副作用函数
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是构建ShallowReactive则不会基于属性值构造响应式式对象
    if (shallow) {
      return res
    }

    /* 对于属性值为@vue/reactivity的Ref实例时，如果不是执行[1,2,3][0]的操作则返回Ref实例包含的primitive value，否则返回Ref实例
     * 因此我们在effect updator中可以通过如下方式直接获取Ref实例属性的primitive value
     * const age = ref(0), state = reactive({ age })
     * console.log(age.value) // 回显0
     * effect(() => { console.log(state.age) }) // 回显0
     */
    if (isRef(res)) {
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }

    // 若属性值不是primitive value或BOM，则基于属性值构造响应式对象
    if (isObject(res)) {
      return isReadonly ? readonly(res) :  reactive(res)
    }
  }
}

这里可以看到当读取属性时才根据属性值类型来为属性值构造响应式对象，而不是当我们调用reactive时就一股脑的遍历对象所有属性，并为各个属性构建响应式对象。

另外，针对includes等数组操作会返回对应的能跟踪依赖变化的版本，到底什么是能跟踪依赖变化的版本呢？

// 文件 ./baseHandlers.ts

const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()

function createArrayInstrumentations() {
  const instrumentations: Record<string, Function> = {}
  ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
    instrumentations[key] = function(this: unknown[], ...args: unknown[]) {
      /**
       * 获取原始数组对象，然后调用数组原生的include,indexOf或lastIndexOf方法获取返回值。
       * 但由于原生方法的执行无法跟踪被遍历的数组元素，因此这里会提前遍历数组中的所有元素，实现数组元素变化的跟踪处理。
       * 
       * 这里有一个待优化点，我们看看如下示例：
       * const arr = reactive([2,1,3])
       * effect(() => {
       *   console.log(arr.indexOf(2))
       * })
       * setTimeout(() =>{
       *   arr[1] = 4
       * }, 5000)
       * 我们可以看到修改arr[1]的值将会触发副作用函数的触发，但arr[1]值的变化不会影响副作用函数的结果，因此可以判定这是一个无效触发。
       */
      const arr = toRaw(this) as any
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, TrackOpTypes.GET, i + '')
      }

      // 调用数组原生的includes,indexOf和lastIndexOf方法
      const res = arr[key](...args)
      if (res === -1 // indexOf和lastIndexOf
          || res === false // includes
      ) {
        // 由于入参有可能是响应式对象，因此当匹配失败，则将尝试获取入参的被代理对象重新匹配
        return arr[key](...args.map(toRaw))
      } else {
        return res
      }
    }
  })
  // 下面的操作会修改数组的长度，这里避免触发依赖长度的副作用函数执行
  ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    instrumentations[key] = function(this: unknown[], ...args: unknown[]) {
      pauseTracking()
      const res = (toRaw(this) as any)[key].apply(this, args)
      resetTracking()
      return res
    }
  })

  return instrumentations
}

// 文件 ./reactive.ts
export function toRaw<T>(observed: T): T {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? toRaw(raw) : observed
}

TypeScript小课堂1：['includes', 'indexOf', 'lastIndexOf'] as const在TypeScript中用于标识对象或数组为不可修改对象。即

let a = ['includes', 'indexOf', 'lastIndexOf'] as const
a[0] = 'hi' // 编译时报错

const b = ['includes', 'indexOf', 'lastIndexOf']
b[0] = 'hi' // 修改成功
console.log(b[0]) // 回显 hi

TypeScript小课堂2：instrumentations[key] = function(this: unknown[], ...args: unknown[]) {...}采用的是TypeScript的this参数，用于限制调用函数时的this类型。
转换为JavaScript就是

instrumentations[key] = function(...args){
  pauseTracking()
  const res = (toRaw(this) as any)[key].apply(this, args)
  resetTracking()
  return res
}

拦截写操作

既然拦截读操作是为了收集依赖，那么拦截写操作自然就是用于触发副作用函数了。流程逻辑如下：

若属性值为Ref对象，而新值取原始值后不是Ref对象，则更新Ref对象的value，由Ref内部触发副作用函数
判断是否为新增属性，还是更新属性值，并触发副作用函数

const set = /*#__PURE__*/ createSetter()

function createSetter(shallow = false) {
  return function set(
    target: Object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    // Proxy的set拦截器返回true表示赋值成功，false表示赋值失败

    let oldValue = (target as any)[key]
    if (!shallow) {
      /* 若旧属性值为Ref，而新值不是Ref，则直接将新值赋值给旧属性的value属性
       * 一眼看上去貌似没有触发依赖该属性的副作用函数执行任务压入调度器，但Ref对象也是响应式对象，赋值给它的value属性，会触发依赖该Ref对象的辅佐用函数压入调度器
       */  
      value = toRaw(value)
      oldValue = toRaw(oldValue)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    }

    // 用于判断是新增属性还是修改属性
    const hadKey = 
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length // 数组索引的处理
        : hasOwn(target, key) // 对象或数组非索引的而处理
    // 赋值后再将副作用函数执行任务压入调度器
    const result = Reflect.set(target, key, value, receiver)
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        // 触发依赖该属性的副作用函数执行任务压入调度器
        trigger(target, TriggerOpTypes.ADD, key, value)
      }
      else if (hasChange(value, oldValue)) {
        // 触发依赖该属性的副作用函数执行任务压入调度器
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

// 文件 @vue/shared
export const hasChanged = (value: any, oldValue: any): boolean => !Object.is(value, oldValue)

为什么不用===而要使用Object.is来比较两个值是否相等呢？
对于-0===0返回true,NaN === NaN返回false，而Object.is(-0, 0)返回false,Object.is(NaN, NaN)返回true。
更多信息请查看《Source Code Reading for Vue 3: How does hasChanged work? 》

拦截删除操作

删除操作会修改属性自然也会触发依赖该属性的副作用函数啦

function deleteProperty(target: object, key: string | symbol): boolean {
  const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  if (result && hadKey) {
    // 若删除成功，且存在旧值则触发依赖该属性的副作用函数执行任务压入调度器
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

拦截检查存在与否操作(`'name' in state`)

检查存在与否属于读操作，因此我们可以用于依赖收集。

function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  // Symbol内置属性不收集
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}

拦截键遍历操作

以下操作都会执行ownKeysProxy trap方法

Object.getOwnPropertyNames
Object.getOwnPropertySymbols
Object.keys
Object.names
for..in

流程逻辑是：对于数组则跟踪数组长度，否则跟踪由effect模块提供的ITERATE_KEY，这个是什么东东呢？继续往下看就知道了:)

function ownKeys(target: object): (string | symbol)[] {
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  return Reflect.ownKeys(target)
}

Proxy中的receiver到底是什么？

在上述代码中我们发现会使用到Proxy拦截函数入参receiver，如：

在读写拦截中都会调用Reflect.get(xxx, xxx, receiver)、Reflect.get(xxx, xxx, receiver).
在写入拦截时，如果target === toRaw(receiver)成立则触发副作用函数执行

在开篇《petite-vue源码剖析-从静态视图开始》中创建作用域链createScopedContext有如下代码

 const reactiveProxy = reactive(
   new Proxy(mergeScope, {
     set(target, key, val, receiver) {
       // 若当设置的属性不存在于当前作用域则将值设置到父作用域上，由于父作用域以同样方式创建，因此递归找到拥有该属性的祖先作用域并赋值
       if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
         return Reflect.set(parentScope, key, val)
       }
       return Reflect.set(target, key, val, receiver)
     }
   })
 )

那么到底receiver是什么呢？

对于数据属性(data properties)的拦截，receiver指向当前构建的Proxy实例本身

// `receiver`指向当前构建的`Proxy`实例本身
const state = {
  name: 'john'
}
let pState = new Proxy(state, {
  get(target, key, receiver) {
    console.log("receiver === pState:", receiver === pState)
    return Reflect.get(target, key, receiver)
  }
})

pState.name
// 回显 receiver === pState: true

对于访问器属性(accessor properties)的拦截，receiver指向this或者继承Proxy实例的对象

const state = {
  _name: 'john',
  name() {
    return this._name
  }
}

let pState = new Proxy(state, {
  get(target, key, receiver) {
    console.log("target[key]():", target[key])
    console.log("receiver !== pState:", receiver !== pState)
    return Reflect.get(target, key, receiver)
  }
})

const son = {
  __proto__: pState,
  _name: 'son'
}

console.log(son.name)
// 回显 target[key](): john
// 回显 receiver !== pState: true
// 回显 son

问题1的解析

若我们将在读操作中将Reflect.get(target, key, receiver)修改为target[key]会怎样呢？
对于代理对象的数据属性(data property)是没有什么影响，但代理对象的访问器属性(accessor property)则会出现如下问题

const state = { 
  _value: 1, 
  get value() {
    return this._value
  } 
}
const reactiveState = new Proxy(state, {
  get(target, key, receiver) {
    console.log(key)
    return target[key]
  }
})

reactiveState.value

上述代码只会回显value，即只是拦截了value属性的读操作，却没有拦截get value()内访问属性_value的读操作，那么在@vue/reactivity中就是没有收集到对_value的依赖。
这是因为通过target[key]访问_value属性时，target指向的是被代理对象state，而receiver则是指向代理对象。所以如果收集对_value的依赖则需要通过Reflect.get(target, key, receiver)来读取_value的值。注意：调用receiver[key]会进入无限递归哦！

问题2的解析

在写入拦截时，如果target === toRaw(receiver)成立则触发副作用函数执行。
而这里要解决的原型链继承问题。
首先，被代理对象和代理对象公用一条原型链，且一方改变原型链将导致另一个同步改变。

const reactive = (state: object) => {
  const RAW = '__V_RAW'
  return new Proxy(state, {
    get(target, key, receiver) {
      if (key === RAW) {
        return state.type
      }

      console.log('target.type', target.type)
      console.log('key', key)
      console.log('receiver.type', receiver[RAW])

      return Reflect.get(target, key, receiver)
    }
  })
}

const parent1 = { type: 'parent1', value: 1}
const parent2 = { type: 'parent2', value: 2}
const child = { type: 'child' }

const pParent1 = reactive(parent1)
const pChild = reactive(child)

Object.setPrototypeOf(pChild, pParent1)
pChild.value
/**
 * 回显如下
 * target.type child
 * key value
 * receiver.type child
 * target.type parent1
 * key value
 * receiver.type child
 */
Object.setPrototypeOf(child, pParent2)
pChild.value
/**
 * 回显如下
 * target.type child
 * key value
 * receiver.type child
 * target.type parent2
 * key value
 * receiver.type child
 */

从上面可以看到无论是修改代理对象还是被代理对象的原型链，两者的原型链均时刻保持同步。另外，我们可以看到当访问子代理对象没有的属性时会访问其原型链的对象查找属性，并且get拦截器的receiver保持指向子代理对象。
那么通过effect(() => { console.log(pChild.value) })访问响应式对象时副作用函数将不仅仅依赖pChild.value，还意外依赖了pParent.value。那么有什么办法处理呢？
既然父代理get拦截器的receiver依然指向子代理对象，那么自然而言通过判断toRaw(receiver)是否等于target即可了。

问题3的解析

另外，在开篇《petite-vue源码剖析-从静态视图开始》中创建作用域链createScopedContext如下代码
receiver === reactiveProxy && !target.hasOwnProperty(key)即对当前作用域(receiver === reactiveProxy)进行写操作时，若属性不存在于该作用域对象，则往父作用域上递归执行写操作。

总结

下一篇我们来看看代理Map/WeakMap/Set/WeakSet的mutableCollectionHandlers的实现吧！

《Petite-Vue源码剖析》小册子

《Petite-Vue源码剖析》结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读，其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦！

petite-vue源码剖析-逐行解读@vue/reactivity之reactive

一切源于Proxy

响应式编程

深入`reactive`的工作原理

源码解读——`reactive`入口

源码解读-代理`Object`和`Array`的`baseHandlers`

拦截读操作

拦截写操作

拦截删除操作

拦截检查存在与否操作(`'name' in state`)

拦截键遍历操作

Proxy中的receiver到底是什么？

问题1的解析

问题2的解析

问题3的解析

总结

《Petite-Vue源码剖析》小册子

肥仔John

引用和评论

React魔法堂：size-sensor源码略读

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

petite-vue源码剖析-逐行解读@vue/reactivity之reactive

一切源于Proxy

响应式编程

深入reactive的工作原理

源码解读——reactive入口

源码解读-代理Object和Array的baseHandlers

拦截读操作

拦截写操作

拦截删除操作

拦截检查存在与否操作('name' in state)

拦截键遍历操作

Proxy中的receiver到底是什么？

问题1的解析

问题2的解析

问题3的解析

总结

《Petite-Vue源码剖析》小册子

肥仔John

引用和评论

React魔法堂：size-sensor源码略读

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

深入`reactive`的工作原理

源码解读——`reactive`入口

源码解读-代理`Object`和`Array`的`baseHandlers`

拦截检查存在与否操作(`'name' in state`)