Vue Reactive 自动解包?怎么弄的?

127 阅读1分钟

故事的开始发生在看到这个。

image.png

怎么就不进行解包呢? 那为什么 Object 类型的就行了。 众所周知,Vue 基于 Proxy 做的,那么就随便一找,看看对象是咋弄的自动解包

const shallowUnwrapHandlers: ProxyHandler<any> = {
  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
  set: (target, key, value, receiver) => {
    const oldValue = target[key]
    if (isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    } else {
      return Reflect.set(target, key, value, receiver)
    }
  }
}

在 get 这里,可以看见 unref,就是一个简单的判断

export 
function unref<T>(ref: MaybeRef<T>): T {
  return isRef(ref) ? ref.value : ref
}

因为 Object get / set 拦截起来很快,而 Map Arrary Set 想要实现,会麻烦很多,关于这几个的代理和 Object 有什么不同,可以看:

  1. Vue.js设计与实现 (豆瓣) (douban.com)
  2. core/packages/reactivity at main · vuejs/core · GitHub