深入了解 Vue3 响应式原理

前言

学习 Vue3.0 源码必须对以下知识有所了解：

1.proxy reflect iterator2.map weakmap set weakset symbol

这些知识可以看一下阮一峰老师的《ES6 入门教程》^[1]。

阅读源码，建议先过一遍该模块下的 API，了解一下有哪些功能。然后再看一遍相关的单元测试，单元测试一般会把所有的功能细节都测一边。对源码的功能有所了解后，再去阅读源码的细节，效果更好。

proxy 术语

const p = new Proxy(target, handler)

•handler，包含捕捉器（trap）的占位符对象，可译为处理器对象。•target，被 Proxy 代理的对象。

友情提醒

在阅读源码的过程中，要时刻问自己三个问题：

1.这是什么？2.为什么要这样？为什么不那样？3.有没有更好的实现方式？

正所谓知其然，知其所以然。

阅读源码除了要了解一个库具有什么特性，还要了解它为什么要这样设计，并且要问自己能不能用更好的方式去实现它。如果只是单纯的停留在“是什么”这个阶段，对你可能没有什么帮助。就像看流水账似的，看完就忘，你得去思考，才能理解得更加深刻。

正文

reactivity 模块是 Vue3.0 的响应式系统，它有以下几个文件：

baseHandlers.ts
collectionHandlers.ts
computed.ts
effect.ts
index.ts
operations.ts
reactive.ts
ref.ts

接下来按重要程度顺序来讲解一下各个文件的 API 用法和实现。

reactive.ts 文件

在 Vue.2x 中，使用 Object.defineProperty() 对对象进行监听。而在 Vue3.0 中，改用 Proxy 进行监听。Proxy 比起 Object.defineProperty() 有如下优势：

1.可以监听属性的增删操作。2.可以监听数组某个索引值的变化以及数组长度的变化。

reactive()

reactive() 的作用主要是将目标转化为响应式的 proxy 实例。例如：

const obj = {
    count: 0
}


const proxy = reactive(obj)

如果是嵌套的对象，会继续递归将子对象转为响应式对象。

reactive() 是向用户暴露的 API，它真正执行的是 createReactiveObject() 函数：

// 根据 target 生成 proxy 实例
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }


  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (
    target[ReactiveFlags.raw] &&
    !(isReadonly && target[ReactiveFlags.isReactive])
  ) {
    return target
  }
  // target already has corresponding Proxy
  if (
    hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  ) {
    return isReadonly
      ? target[ReactiveFlags.readonly]
      : target[ReactiveFlags.reactive]
  }
  // only a whitelist of value types can be observed.
  if (!canObserve(target)) {
    return target
  }


  const observed = new Proxy(
    target,
    // 根据是否 Set, Map, WeakMap, WeakSet 来决定 proxy 的 handler 参数
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  // 在原始对象上定义一个属性（只读则为 "__v_readonly"，否则为 "__v_reactive"），这个属性的值就是根据原始对象生成的 proxy 实例。
  def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )


  return observed
}

这个函数的处理逻辑如下：

1.如果 target 不是一个对象，返回 target。2.如果 target 已经是 proxy 实例，返回 target。3.如果 target 不是一个可观察的对象，返回 target。4.生成 proxy 实例，并在原始对象 target 上添加一个属性（只读则为 __v_readonly，否则为 __v_reactive），指向这个 proxy 实例，最后返回这个实例。添加这个属性就是为了在第 2 步做判断用的，防止对同一对象重复监听。

其中第 3、4 点需要单独拎出来讲一讲。

什么是可观察的对象

const canObserve = (value: Target): boolean => {
  return (
    !value[ReactiveFlags.skip] &&
    isObservableType(toRawType(value)) &&
    !Object.isFrozen(value)
  )
}

canObserve() 函数就是用来判断 value 是否是可观察的对象，满足以下条件才是可观察的对象：

1.ReactiveFlags.skip 的值不能为 __v_skip，__v_skip 是用来定义这个对象是否可跳过，即不监听。2.target 的类型必须为下列值之一 Object,Array,Map,Set,WeakMap,WeakSet 才可被监听。3.不能是冻结的对象。

传递给 proxy 的处理器对象是什么

根据上面的代码可以看出来，在生成 proxy 实例时，处理器对象是根据一个三元表达式产生的：

// collectionTypes 的值为 Set, Map, WeakMap, WeakSet
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers

这个三元表达式非常简单，如果是普通的对象 Object 或 Array，处理器对象就使用 baseHandlers；如果是 Set, Map, WeakMap, WeakSet 中的一个，就使用 collectionHandlers。

collectionHandlers 和 baseHandlers 是从 collectionHandlers.ts 和 baseHandlers.ts 处引入的，这里先放一放，接下来再讲。

有多少种 proxy 实例

createReactiveObject() 根据不同的参数，可以创建多种不同的 proxy 实例：

1.完全响应式的 proxy 实例，如果有嵌套对象，会递归调用 reactive()。2.只读的 proxy 实例。3.浅层响应的 proxy 实例，即一个对象只有第一层的属性是响应式的。4.只读的浅层响应的 proxy 实例。

浅层响应的 proxy 实例是什么？

之所以有浅层响应的 proxy 实例，是因为 proxy 只代理对象的第一层属性，更深层的属性是不会代理的。如果确实需要生成完全响应式的 proxy 实例，就得递归调用 reactive()。不过这个过程是内部自动执行的，用户感知不到。

其他一些函数介绍

// 判断 value 是否是响应式的
export function isReactive(value: unknown): boolean {
  if (isReadonly(value)) {
    return isReactive((value as Target)[ReactiveFlags.raw])
  }
  return !!(value && (value as Target)[ReactiveFlags.isReactive])
}
// 判断 value 是否是只读的
export function isReadonly(value: unknown): boolean {
  return !!(value && (value as Target)[ReactiveFlags.isReadonly])
}
// 判断 value 是否是 proxy 实例
export function isProxy(value: unknown): boolean {
  return isReactive(value) || isReadonly(value)
}


// 将响应式数据转为原始数据，如果不是响应数据，则返回源数据
export function toRaw(observed: T): T {
  return (
    (observed && toRaw((observed as Target)[ReactiveFlags.raw])) || observed
  )
}


// 给 value 设置 skip 属性，跳过代理，让数据不可被代理
export function markRaw(value: T): T {
  def(value, ReactiveFlags.skip, true)
  return value
}

baseHandlers.ts 文件

在 baseHandlers.ts 文件中针对 4 种 proxy 实例定义了不对的处理器。由于它们之间差别不大，所以在这只讲解完全响应式的处理器对象：

export const mutableHandlers: ProxyHandler