vue3的响应式设计——proxy

概要

vue3的 reactivity 是一个独立的包，这是一个比较大的改动，所有响应式相关的实现都在里面，我主要讲的也就是这一块的。

知识准备

1.proxy： es6的代理实现方式
2.reflect: 将object对象一些明显属于语言内部方法，放到Reflect上，
3.weakMap: WeakMap 的 key 只能是 Object 类型。
4.weakSet: WeakSet 对象是一些对象值的集合, 并且其中的每个对象值都只能出现一次.
响应式简要实现
我们曾经的书写响应式数据是这样的

data () {
    return {
        count: 0
    }
}

然后vue3新的响应式书写方式（老的也兼容）

 setup() {
     const state = {
         count: 0,
         double: computed(() => state.count * 2)
     }
     function increment() {
         state.count++
     }
     
    onMounted(() => {
        console.log(state.count)
    })
    
    watch(() => {
        document.title = `count ${state.count}`
   })
    return {
        state,
      increment
   }
}

感觉setup这块就有点像 react hooks 理解成一个带有数据的逻辑复用模块，不再以vue组件为单位的代码复用了
和React钩子不同，setup()函数仅被调用一次。
所以新的响应书数据两种声明方式：
1.Ref
前提：声明一个类型 Ref

export interface Ref<T> {
  [refSymbol]: true
  value: UnwrapNestedRefs<T>
}

ref()函数源码：

 function ref(raw: unknown) {
   if (isRef(raw)) {
     return raw
   }
   // convert 内容：判断 raw是不是对象，是的话 调用reactive把raw响应化
   raw = convert(raw)
   const r = {
     _isRef: true,
     get value() {
      // track 理解为依赖收集
      track(r, OperationTypes.GET, '')
      return raw
    },
    set value(newVal) {
      raw = convert(newVal)
      // trigger 理解为触发监听，就是触发页面更新好了
      trigger(r, OperationTypes.SET, '')
    }
  }
  return r as Ref
}

还是看下 convert 吧

const convert = val => isObject(val) ? reactive(val) : val

可以看得出 ref类型 只会包装最外面一层，内部的对象最终还是调用reactive，生成Proxy对象进行响应式代理。
疑问
可能有人想问，为什么不都用proxy, 内部对象都用proxy,最外层还要搞个 Ref类型，多此一举吗？
理由可能比较简单，那就是proxy代理的都是对象，对于基本数据类型，函数传递或对象结构是，会丢失原始数据的引用。
官方解释：

However, the problem with going reactive-only is that the consumer of a composition function must keep the reference to the returned object at all times in order to retain reactivity. The object cannot be destructured or spread:

2.Reactive
前提：先了解下 weakMap

// WeakMaps that store {raw <-> observed} pairs.
const rawToReactive = new WeakMap<any, any>() // key:原始对象 value: Proxy
const reactiveToRaw = new WeakMap<any, any>()
const rawToReadonly = new WeakMap<any, any>()
const readonlyToRaw = new WeakMap<any, any>()
reactive(target)

源码如下：
注：target一定是一个对象，不然会报警告

 function reactive(target) {
   // 如果target是一个只读响应式数据
   if (readonlyToRaw.has(target)) {
     return target
   }
   // 如果是被用户标记的只读数据，那通过readonly函数去封装
   if (readonlyValues.has(target)) {
     return readonly(target)
   }
  // go ----> step2
  return createReactiveObject(
    target,
    rawToReactive,
    reactiveToRaw,
    mutableHandlers, // 注意传递
    mutableCollectionHandlers
  )
}

createReactiveObject(target,toProxy,toRaw,baseHandlers,collectionHandlers)

 function createReactiveObject(
   target: unknown,
   toProxy: WeakMap<any, any>,
   toRaw: WeakMap<any, any>,
   baseHandlers: ProxyHandler<any>,
   collectionHandlers: ProxyHandler<any>
 ) {
     // 判断target不是对象就 警告 并退出
   if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // 通过原始数据 -> 响应数据的映射，获取响应数据
  let observed = toProxy.get(target)
  if (observed !== void 0) {
    return observed
  }
  // 如果原始数据本身就是个响应数据了，直接返回自身
  if (toRaw.has(target)) {
    return target
  }
  // 如果是不可观察的对象，则直接返回原对象
  if (!canObserve(target)) {
    return target
  }
  // 集合数据与(对象/数组) 两种数据的代理处理方式不同
  const handlers = collectionTypes.has(target.constructor)
    ? collectionHandlers
    : baseHandlers
  // 声明一个代理对象 ----> step3
  observed = new Proxy(target, handlers)
  // 两个weakMap 存target observed
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  if (!targetMap.has(target)) {
    targetMap.set(target, new Map())
  }
  return observed
}

baseHandles
(我们以对象类型为例，集合类型的handlers稍复杂点)
handlers如下，new Proxy(target, handles)的 handles就是下面这个对象

export const mutableHandlers = {
  get: createGetter(false),
  set,
  deleteProperty,
  has,
  ownKeys
}

createGetter(false)
问题：如何代理多层嵌套的对象
关键词：利用 proxy 的 get
思路：当我们代理get获取到res时，判断res 是否是对象，如果是那么 继续reactive(res)，可以说是一个递归

reactive(target) ->
createReactiveObject(target,handlers) ->
new Proxy(target, handlers) ->
createGetter(readonly) ->
get() -> res ->
isObject(res) ? reactive(res) : res

 function createGetter(isReadonly: boolean) {
   // isReadonly 用来区分是否是只读响应式数据
   // receiver即是被创建出来的代理对象
   return function get(target: object, key: string | symbol, receiver: object) {
     // 获取原始数据的响应值
     const res = Reflect.get(target, key, receiver)
     if (isSymbol(key) && builtInSymbols.has(key)) {
       return res
     }
    if (isRef(res)) {
      return res.value
    }
    // 收集依赖
    track(target, OperationTypes.GET, key)
    // 这里判断上面获取的res 是否是对象，如果是对象 则调用reactive并且传递的是获取到的res，
    // 则形成了递归
    return isObject(res)
      ? isReadonly
        ? // need to lazy access readonly and reactive here to avoid
          // circular dependency
          readonly(res)
        : reactive(res)
      : res
  }
}

set
set的一个主要作用去触发监听，使试图更新，需要注意的是控制什么时候才是视图需要真的更新

 function set(
   target: object,
   key: string | symbol,
   value: unknown,
   receiver: object
 ): boolean {
   // 拿到新值的原始数据
   value = toRaw(value)
   // 获取旧值
  const oldValue = (target as any)[key]
  // 如果旧值是Ref类型，新值不是，那么直接更新值，并返回
  if (isRef(oldValue) && !isRef(value)) {
    oldValue.value = value
    return true
  }
  const hadKey = hasOwn(target, key)
  const result = Reflect.set(target, key, value, receiver)
  // 如果是原始数据原型链上的数据操作，不做任何触发监听函数的行为。
  if (target === toRaw(receiver)) {
    // 更新的两种条件 
    // 1. 不存在key，即当前操作是在新增属性
    // 2. 旧值和新值不等
    if (!hadKey) {
      trigger(target, OperationTypes.ADD, key)
    } else if (hasChanged(value, oldValue)) {
      trigger(target, OperationTypes.SET, key)
    }
  }
  return result
}

问题2：
对于数据的set操作会出发多次traps，
这里有个前提了解：就是我们日常修改数组，比如 let a = [1]， a.push(2),
这个push操作，我们是实际上是对a做了2个属性的修改，1，set length 1； 2. set value 2
所以我们的set traps会出发多次
思路：通过属性值和value控制，比如当 set key是 length的时候，我们可以判断当前数组 已经有此属性，所以不需要出发更新，当新设置的值和老值一样是也不需要更新（说辞不够严谨）

问题3：
set的源码里面有 有一个 target === toRaw(receiver)条件下才继续操作 trigger更新视图
这里就暴露出一个东西，即存在 target !== toRaw(receiver)
Receiver: 最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上或以其他方式被间接地调用（因此不一定是 proxy 本身）
其实源码有注释

// don’t trigger if target is something up in the prototype chain of original

即如果我们的操作是操作原始数据原型链上的数据操作，target 就不等于 toRaw(receiver)
什么情况下 target !== toRaw(receiver)
例如：

 const child = new Proxy(
   {},
   { // 其他 traps 省略
     set(target, key, value, receiver) {
       Reflect.set(target, key, value, receiver)
       console.log('child', receiver)
       return true
     }
   }
)

const parent = new Proxy(
  { a: 10 },
  { // 其他 traps 省略
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver)
      console.log('parent', receiver)
      return true
    }
  }
)

Object.setPrototypeOf(child, parent) // child.__proto__ === parent true

child.a = 4

// 结果
// parent Proxy {a: 4}
// Proxy {a: 4}

从结果可以看出，理论上 parent的set应该不会触发，但实际是触发了，此时

target: {a: 10}
receiver: Proxy {a: 4}
// 在vue3中
toRaw(receiver): {a: 4} 

为什么有了proxy做响应式还需要一个Ref呢？
因为Proxy无法劫持基础数据类型，所以设计了这么一个对象——Ref，其实还是有很多设计细节，就不一一赘述了，官网也给了他们不同点，可以自己去好好了解。