Vue3响应式方案及ref reactive的区别详解

目录

• 一、前言
• 二、新的方案
• 1. 缘由
• 2. Proxy 和 Reflect
• 1） Proxy
• 2） Reflect
• 3. reactive
• 1） createReactiveObject() 函数
• 2） mutableHandlers() 函数 -> 对象类型的 handlers
• 3） mutableInstrumentations() 函数 -> Map Set等类型的 handlers
• 4. ref
• 1） createRef()
• 2） toReactive()
• 3）proxyRefs() 自动脱 ref
• 三、 结语

一、前言

距离 Vue3 出来了已经有一段时间了， 最近呢重温了一下Vue3的响应式方案，以及ref reactive的区别，相信你看完本文，也能对 Vue3 响应式的了解有所提高

在看源码的过程中，时常会感到框架的设计之美，看起来也会感到赏心悦目， 这也是能坚持把源码看下去的动力

二、新的方案

1. 缘由

• 已知在 Vue2 中， 响应式原理一直是采用 Object.defineProperty 来进行，那这样做有什么权限呢？ 下面一一道来

  • 这个API， 只能拦截 get / set 的属性
  • 如对象 新增 或者 删除 了属性，则无法监听到改变
  • 对于数组，若使用数组的原生方法改变数组元素的时候 也无法监听到改变

• 所以呢在Vue3中采用了 Proxy 和 Reflect搭配来代理数据

2. Proxy 和 Reflect

1） Proxy

既然Vue3中响应式数据是基于 Proxy 实现的，那么什么是Proxy呢？

使用Proxy可以创建一个代理对象，它可以实现对 对象数据 的 代理， 所以它 无法对非对象值进行代理，也就是为什么Vue3中对于非对象值要使用 ref 来进行响应式的原因 (后面讲解ref的时候再细说)

• 代理是指 允许我们拦截并重新定义对一个对象的基本操作。 例如： 拦截读取、 修改等操作.

const obj = {}


const newP = new Proxy(obj, {
     // 拦截读取
  get(){/*...*/ },

  // 拦截设置属性操作
  set(){/*...*/ }
})

2） Reflect

说完了Proxy， 接下来我们来说说 Reflect

通过观察 MDN 官网可以发现， Reflect的方法 和 Proxy的拦截器方法 名字基本一致

那就出现了一个问题，我们为什么要用 Reflect 呢？

主要还是它的第三个参数，你可以理解为函数调用过程中的this,我们来看看它配合 Proxy 具体的用途吧

const obj = {
  foo: 1,
  
  // obj 中有一个 getter属性 通过this获取foo的值
  get getFoo() { return this.foo; }
};


const newP = new Proxy(obj,
  {
    // 拦截读取
    get(target, key) {
      console.log('读取', key); // 注意这里目前没有使用 Reflect
      return target[key];
    },

    // 拦截设置属性操作
    set(target, key, newVal) {
      console.log('修改', key);
      target[key] = newVal
    }
  })

obj.foo++
console.log(newP.getFoo);  

执行上面代码你会发现， 在 Proxy 中 get 拦截的中，只会触发对 getFoo 属性进行读取的拦截， 而无法触发在 getFoo 里面对 this.foo 进行读取的拦截!

问题就出现在 getFoo 这个getter里， 这里面的 this 在我们 未使用 Reflect 的时候指向它的原始对象，所以我们才无法通过 Proxy 拦截到属性读取

只需修改一下上面代码中 Proxy 里面的 get 拦截方法

    // 拦截读取
    get(target, key, receiver) {
      console.log('读取', key);
      return Reflect.get(target, key, receiver); // 使用 Reflect返回读取的属性值
    },

这下再执行上面的例子，就会发现能正常对 getFoo 里面的 foo 属性进行读取的拦截。 因为这个时候的 this 已经指向了代理对象 newP

以上呢，就是对 Proxy 和 Reflect 的简易讲解，接下来我们讲讲 Vue3 中的 reactive

3. reactive

看源码会发现，我们平时使用 reactive 的时候，会调用一个 createReactiveObject 的方法

这个地方在: packages\reactivity\src\reactive

export function reactive(target: T): UnwrapNestedRefs
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,  // 普通对象的 handlers
    mutableCollectionHandlers, // Set Map 等类型的 handlers
    reactiveMap
  )
}

1） createReactiveObject() 函数

其中主要是做一些前置判断，然后建立响应式地图

WeakMap -> Map -> Set

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
  // raw 代表原始数据
  // 或者是非响应式数据就直接返回 原数据
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  
  // 如已被代理则直接返回代理的这个对象
  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
  }
  
  // 建立代理 Proxy
  const proxy = new Proxy(
    target,
    // 使用不同的 hanlders
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  
  // 存储到响应式地图中
  proxyMap.set(target, proxy)
  return proxy
}

2） mutableHandlers() 函数 -> 对象类型的 handlers

这个地方在: packages\reactivity\src\baseHandlers

主要讲讲get和set

export const mutableHandlers: ProxyHandler