Vue

Vue 3 响应式原理二 - Proxy and Reflect

2021-08-25  本文已影响0人  AizawaSayo

在上一篇【Vue 3 响应式原理一 - Vue 3 Reactivity】
中，我们知道了 Vue 3 如何跟踪effects，以便在需要时重新运行它们。然而，我们仍然需要手动调用track和trigger。现在我们将学习如何使用Reflect和Proxy来自动调用它们。

Hooking onto Get and Set

我们需要一种方法来 hook (或侦听) 我们的响应式对象上的get和set。
GET property (访问属性) => 调用track去保存当前 effect
SET property (修改了属性) => 调用trigger来运行属性的 dependencies (effects)
如何做到这些？在 Vue 3 中我们使用 ES6 的Reflect和Proxy去拦截 GET 和 SET 调用。Vue 2 中是使用 ES5 的Object.defineProperty实现这一点的。

理解 ES6 Reflect

要打印出一个对象的某属性可以像这样做：

let product = { price: 5, quantity: 2 }
console.log('quantity is ' + product.quantity)
// or 
console.log('quantity is ' + product['quantity'])

然而，也可以使用Reflect去 GET 对象上的值。 Reflect 允许你用另一种方式获取对象的属性：

console.log('quantity is ' + Reflect.get(product, 'quantity'))

为什么使用reflect？因为它具有我们稍后需要的特性，在理解 ES6 Proxy 之后再来展示。

理解 ES6 Proxy

Proxy 是另一个对象的占位符，默认情况下对该对象进行委托。 如果我运行如下代码：

let product = { price: 5, quantity: 2 }
let proxiedProduct = new Proxy(product, {})
console.log(proxiedProduct.quantity)

注意到 Proxy 的第二个参数{}了吗？这是一个handler，可用于定义代理对象(Proxy)上的自定义行为，例如拦截 get 和 set 调用。这些拦截器方法称为traps(捕捉器)，可以帮助我们拦截一些基本操作，如属性查找、枚举或函数调用。下面是如何在handler上设置 get traps：

let product = { price: 5, quantity: 2 }
let proxiedProduct = new Proxy(product, {
  get() {
    console.log('Get was called')
    return 'Not the value'
  }
})
console.log(proxiedProduct.quantity)

我们应该返回实际的值，像这样：

let product = { price: 5, quantity: 2 }
let proxiedProduct = new Proxy(product, {
  get(target, key) {  // <--- The target (代理的对象) and key (属性名)
    console.log('Get was called with key = ' + key)
    return target[key]
  }
})
console.log(proxiedProduct.quantity)
image.png

get 函数有两个参数，target是我们的对象(product)和我们试图获取的key(属性)，在本例中是quantity。

当我们在 Proxy 中使用Reflect，可以添加一个额外参数，可以被传递到Reflect调用中。

let product = { price: 5, quantity: 2 }
let proxiedProduct = new Proxy(product, {
  get(target, key, receiver) {  // <--- notice the receiver
    console.log('Get was called with key = ' + key)
    return Reflect.get(target, key, receiver) // <----
  }
})

这能确保当我们的对象有从其他对象继承的值/函数时，this 值能正确地指向调用对象。使用 Proxy 的一个难点就是this绑定。我们希望任何方法都绑定到这个 Proxy，而不是target对象。这就是为什么我们总是在Proxy内部使用Reflect，这样我们就能保留我们正在自定义的原始行为。

现在让我们添加一个setter方法：

let product = { price: 5, quantity: 2 }
let proxiedProduct = new Proxy(product, {
  get(target, key, receiver) {  
    console.log('Get was called with key = ' + key)
    return Reflect.get(target, key, receiver) 
  }
  set(target, key, value, receiver) {
    console.log('Set was called with key = ' + key + ' and value = ' + value)
    return Reflect.set(target, key, value, receiver)
  }
})
proxiedProduct.quantity = 4
console.log(proxiedProduct.quantity)

set 除了使用Reflect.set接收值来设置 target 之外，看起来与 get 非常相似。输出也符合我们的预期。

我们可以通过另一种方式封装这段代码，就像在 Vue 3 源码中看到的那样。首先，我们将这个代理委托代码包装在一个返回proxy的响应式函数中，如果你用过 Vue 3 Composition API，它应该看起来很熟悉。然后将包含 get 和 set traps 的handler常量发送到我们的proxy中。

function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      console.log('Get was called with key = ' + key)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      console.log('Set was called with key = ' + key + ' and value = ' + value)
      return Reflect.set(target, key, value, receiver)
    }
  }
  return new Proxy(target, handler) // 创建一个 Proxy 对象
}
let product = reactive({ price: 5, quantity: 2 }) // <-- Returns a proxy object
product.quantity = 4
console.log(product.quantity)

这会返回与上面相同的结果，但现在我们可以轻松地利用reactive方法创建多个响应式对象。

结合 Proxy + Effect 存储

回到最初的起点：
GET property (访问属性) => 我们需要调用track去保存当前 effect
SET property (修改了属性) => 我们需要调用trigger来运行属性的 dependencies (effects)

track 将检查当前运行的是哪个副作用(effect)，并将其与 target 和 property 记录在一起。这就是 Vue 如何知道这个 property 是该副作用的依赖项。

我们可以想象一下上面的reactive代码，需要调用 track 和 trigger的地方。

思路整理：

  1. 当一个值被读取时进行追踪：proxy 的get处理函数中track函数记录了该 property 和当前副作用。
  2. 当某个值改变时进行检测：在 proxy 上调用set处理函数。
  3. 重新运行代码来读取原始值：trigger函数查找哪些副作用依赖于该 property 并执行它们。

直接整上：

const targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated
function track(target, key) {
  // We need to make sure this effect is being tracked.
  let depsMap = targetMap.get(target) // Get the current depsMap for this target
  if (!depsMap) {
    // There is no map.
    targetMap.set(target, (depsMap = new Map())) // Create one
  }
  let dep = depsMap.get(key) // Get the current dependencies (effects) that need to be run when this is set
  if (!dep) {
    // There is no dependencies (effects)
    depsMap.set(key, (dep = new Set())) // Create a new Set
  }
  dep.add(effect) // Add effect to dependency map
}
function trigger(target, key) {
  const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies (effects)
  if (!depsMap) {
    return
  }
  let dep = depsMap.get(key) // If there are dependencies (effects) associated with this
  if (dep) {
    dep.forEach(effect => {
      // run them all
      effect()
    })
  }
}
function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      let result = Reflect.get(target, key, receiver)
      // Track
      track(target, key) // If this reactive property (target) is GET inside then track the effect to rerun on SET
      return result
    },
    set(target, key, value, receiver) {
      let oldValue = target[key]
      let result = Reflect.set(target, key, value, receiver)
      if (oldValue != result) {
        // Trigger
        trigger(target, key) // If this reactive property (target) has effects to rerun on SET, trigger them.
      }
      return result
    }
  }
  return new Proxy(target, handler)
}
let product = reactive({ price: 5, quantity: 2 })
let total = 0
let effect = () => {
  total = product.price * product.quantity
}
effect()
console.log('before updated quantity total = ' + total)
product.quantity = 3
console.log('after updated quantity total = ' + total)

这段代码输出：

before updated quantity total = 10
after updated quantity total = 15

现在我们不再需要调用trigger和track，因为它们在我们的get和set方法中被合理地调用。

使用 Proxy 和 Reflect 能带来什么好处？

当你使用proxies时，也就是所谓的响应式转换，是懒执行的。
而把对象传给 Vue 2 的响应式时，则必须遍历所有的 key，并且当场转换，以确保它们被访问时都是响应式的。
对于 Vue3，当调用reactive时，返回的是一个proxy代理对象，并且只会在需要的时候才去转换嵌套的对象。有点像"懒加载"。这样做的好处打个比方，当你进行分页渲染，那么只有第一页需要的10个object需要经过响应式转化。这对应用程序而言可以节省很多时间，特别是当程序拥有庞大的列表对象时。

我们已经前进了一大步！在此代码稳固之前，只有一个 bug 需要修复。具体来说，我们只希望track在 响应式对象有被effect使用 时才被调用。现在只要响应式对象属性是get，就会调用track。我们将在下一篇中完善这一点。

Vue 3 响应式原理一 - Vue 3 Reactivity
Vue 3 响应式原理二 - Proxy and Reflect
Vue 3 响应式原理三 - activeEffect & ref
Vue 3 响应式原理四 - Computed Values & Vue 3 源码

上一篇下一篇

猜你喜欢

热点阅读