浅谈Vue3响应式原理与源码解读

一. 了解几个概念

什么是响应式

在开始响应式原理与源码解析之前，需要先了解一下什么是响应式？首先明确一个概念：响应式是一个过程，它有两个参与方：

• 触发方：数据

• 响应方：引用数据的函数

当数据发生改变时，引用数据的函数会自动重新执行，例如，视图渲染中使用了数据，数据改变后，视图也会自动更新，这就完成了一个响应的过程。

副作用函数

在Vue与React中都有副作用函数的概念，什么是副作用函数？如果一个函数引用了外部的数据，这个函数会受到外部数据改变的影响，我们就说这个函数存在副作用，也就是我们所说的副作用函数。初听这个名字不太好理解，其实 副作用函数就是引用了数据的函数或是与数据相关联的函数。举个例子：

    
    
    
    favicon.ico">
    



    

    

在上面例子中，effect函数里面引用了外部的数据obj.name,如果这个数据发生了改变，则会影响到这个函数，类似effect的这种函数就是副作用函数。

实现响应式的基本步骤

在上面的例子中,当obj.name发生了改变，effect是我们手动执行的，如果能监听到obj.name的变化，让其自动执行副作用函数effect，那么就实现了响应式的过程。其实无论是 Vue2 还是 Vue3 ，响应式的核心都是 数据劫持/代理、依赖收集、依赖更新，只不过由于实现数据劫持方式的差异从而导致具体实现的差异。

• Vue2响应式：基于Object.defineProperty()实现的数据的劫持

• Vue3响应式：基于Proxy实现对整个对象的代理

关于Vue2的响应式这里不做重点讲解，这篇文章主要关注Vue3响应式原理的实现。

二. Proxy 与 Reflect

在解析Vue3的响应式原理之前，首先需要了解两个ES6新增的API:Porxy与Reflect。

Proxy

Proxy: 代理，顾名思义主要用于为对象创建一个代理，从而实现对对象基本操作的拦截和自定义。可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。基本语法：

let proxy = new Proxy(target, handler);

• target: 需要拦截的目标对象

• handler: 也是一个对象，用来定制拦截行为 举个例子：

const obj = {
    name: 'John',
    age: 16
}

const objProxy = new Proxy(obj,{})
objProxy.age = 20
console.log('obj.age',obj.age);
console.log('objProxy.age',objProxy.age);
console.log('obj与objProxy是否相等',obj === objProxy);
// 输出
[Log] obj.age – 20
[Log] objProxy.age – 20 
[Log] obj与objProxy是否相等 – false

这里objProxy的handler为空，则直接指向被代理对象,并且代理对象与数据源对象并不全等.如果需要更加灵活的拦截对象的操作，就需要在handler中添加对应的属性。例如：

const obj = {
    name: 'John',
    age: 16
}

const handler = {
    get(target, key, receiver) {
        console.log(`获取对象属性${key}值`)
        return target[key]
    },
    set(target, key, value, receiver) {
        console.log(`设置对象属性${key}值`)
        target[key] = value
    },
    deleteProperty(target, key) {
        console.log(`删除对象属性${key}值`)
        return delete target[key]
    },
}

const proxy = new Proxy(obj, handler)
console.log(proxy.age)
proxy.age = 20
console.log(delete proxy.age)

// 输出
[Log] 获取对象属性age值 (example01.html, line 22)
[Log] 16 (example01.html, line 36)
[Log] 设置对象属性age值 (example01.html, line 26)
[Log] 删除对象属性age值 (example01.html, line 30)
[Log] true (example01.html, line 38)

上面的例子，我们在捕获器中定义了set()、get()、deleteProperty()属性，通过对proxy的操作实现了对obj的操作拦截。这些属性的触发方法有如下参数：

• target —— 是目标对象，该对象被作为第一个参数传递给new Proxy

• key —— 目标属性名称

• value —— 目标属性的值

• receiver —— 指向的是当前操作 正确的上下文。如果目标属性是一个 getter 访问器属性，则 receiver 就是本次读取属性所指向的 this 对象。通常，receiver这就是 proxy 对象本身,但是如果我们从 proxy 继承，则receiver指的是从该 proxy 继承的对象

• 当然除了以上三个还有一些常用的属性操作方法：

  • has()，拦截：in操作符.

  • ownKeys(),拦截：Object.getOwnPropertyNames(proxy) Object.getOwnPropertySymbols(proxy) Object.keys(proxy)

  • construct(),拦截：new 操作等

Reflect

Reflect: 反射，就是将代理的内容反射出去。Reflect与Proxy一样，也是 ES6 为了操作对象而提供的新 API。它提供拦截JavaScript操作的方法，这些方法与Proxy handlers 提供的的方法是一一对应的，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。且 Reflect 不是一个函数对象，即不能进行实例化，其所有属性和方法都是静态的。还是上面的例子

const obj = {
    name: 'John',
    age: 16
}

const handler = {
    get(target, key, receiver) {
        console.log(`获取对象属性${key}值`)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
        console.log(`设置对象属性${key}值`)
        return Reflect.set(target, key, value, receiver)
    },
    deleteProperty(target, key) {
        console.log(`删除对象属性${key}值`)
        return Reflect.deleteProperty(target, key)
    },
}

const proxy = new Proxy(obj, handler)
console.log(proxy.age)
proxy.age = 20
console.log(delete proxy.age)

上面的例子中

• Reflect.get()代替target[key]操作

• Reflect.set()代替target[key] = value操作

• Reflect.deleteProperty()代替delete target[key]操作 当然除了上面的方法还有一些常用的Reflect方法：

Reflect.construct(target, args)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

三. reactive、ref源码解析

了解了Proxy与Reflect，看下Vue3是如何通过porxy实现响应式的。其核心是下面要介绍的两个方法：reactive、ref.这里依照Vue3.2版本的源码进行解析。

reactive的源码实现

打开源文件，找到文件packages/reactivity/src/reactive.ts 查看源码。

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

• 刚开始对target进行响应式只读判断，如果为true，则直接返回target，reactive实现的核心方法是createReactiveObject()：

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
  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.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a whitelist of value types can be observed.
  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
}

• createReactiveObject()方法有五个参数：

  • target： 传入的原始目标对象

  • isReadonly: 是否是只读的标识

  • baseHandlers: 为普通对象创建proxy时的第二个参数handler

  • collectionHandlers: 为collection类型对象创建proxy时的第二个参数handler

  • proxyMap: WeakMap类型的map，主要用于存储 target与他的proxy之间的对应关系

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

• 源码可以看到，他将对象分为COMMON对象（Object和Array）与COLLECTION类型对象(Map、Set、WeakMap、WeakSet),这样区分的主要目的是为了根据不通的对象类型，来定制不同的handler

• 在createReactiveObject()的前几行，进行了一系列的判断：

  • 首先判断target是否是对象，如果为false,直接return

  • 判断target是否是响应式对象，如果为true,直接return

  • 判断是否已经为target创建过proxy了，如果为true,直接return

  • 判断target是否是刚才上面提到的6种对象类型，如果为false,直接return

  • 如果以上条件都满足，则为target创建proxy,并return这个proxy

接下来就是根据不同的对象类型，传入不同的handler的逻辑处理了，主要关注baseHandlers，里面存在五个属性操作方法，这重点解析get与set方法。

源码位置：packages/reactivity/src/baseHandlers.ts

export const mutableHandlers: ProxyHandler