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的特点：

1. 通过new Proxy构建的对象进行操作才能拦截对象属性的读写操作，而被代理的对象则没有任何变化；
2. 可以监听数组元素的变化和增减；
3. 可以监听对象属性的增减；
4. 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对象转换为监控对象，拦截对象属性的读写删操作，并收集依赖该对象（属性）的副作用函数。大致流程如下：

1. 通过reactive构造的响应式对象都会将被代理对象和响应式对象的映射关系保存在reactiveMap，防止重复生成响应式对象，优化性能;
2. 当调用reactive后会对被代理对象进行检查，若不是只读对象、响应式对象、primitive value和reactiveMap中不存在则根据被代理对象的类型构造响应式对象
3. 拦截读操作(get,has和ownKeys)时调用effect.ts中的track收集依赖
4. 拦截写操作(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()

// 将被代理对象的处理方式分为不代理(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,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
  // 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