Hello! 欢迎来到小浪资源网!



为什么 Vue3 响应式源码中 Reflect.set 需要先赋值再返回才能解决更新问题?


avatar
1986424546 2024-11-15 25

为什么 Vue3 响应式源码中 Reflect.set 需要先赋值再返回才能解决更新问题?

vue3 响应式源码中,使用 reflect.set 为什么需要先赋值再返回才能解决更新问题?

vue3 的响应式源码中,set 拦截器负责处理对象属性的更新。使用 reflect.set 时,需要先赋值再返回,才能避免以下更新问题:

考虑下面代码:

const animal = reactive({   name: 'dog',   age: 2 });  const unwatch = effect(() => {   document.queryselector('#app').innerhtml = `     <div>       <h2>name: ${animal.name}</h2>       <h2>age: ${animal.age}</h2>     </div>   `; });  settimeout(() => {   animal.name = 'cat'; // 更新   animal.age = 3; // 不会更新 }, 2000);

在这个示例中,对 animal.name 和 animal.age 的更新分别触发了 effect 函数。然而,当 settimeout 回调执行时,animal.age 的更新不会触发 effect 的重新执行。

立即学习前端免费学习笔记(深入)”;

这是因为:

  1. 当 animal.name 更新时,trigger 被调用,收集依赖项并触发 effect 的首次执行。此时,animal 对象为 { name: ‘dog’, age: 2 }。
  2. reflect.set(…arguments) 执行后,animal 对象更新为 { name: ‘cat’, age: 2 }。
  3. 当 animal.age 更新时,trigger 再次被调用,但它获取的 animal 对象仍然是 { name: ‘cat’, age: 2 }。这是因为在先前的 reflect.set 调用中直接返回了结果,导致未及时更新 animal。
  4. effect 再次执行,但它使用未更新的 animal 对象,因此 age 属性的更新未被反映。

通过在 reflect.set 调用前先将结果赋值给一个变量,我们可以避免此问题:

let res = Reflect.set(...arguments); return res;

这样,当 animal.age 更新时,trigger 获取的 animal 对象已经是更新后的 { name: ‘cat’, age: 3 },effect 可以正确地重新执行以反映更新。

相关阅读