分析 Vue 3 源码中 `Proxy` 拦截 `in`、`has`、`ownKeys` 等操作，以及它们对响应式系统行为的影响。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 响应式系统里那些“偷偷摸摸”的 Proxy 操作：in、has 和 ownKeys。别看它们名字平平无奇，但它们可是 Vue 3 能玩转各种骚操作，比如条件渲染、v-for 循环的关键人物。准备好了吗？ Let’s dive in!

开场白：Proxy，响应式世界的守门员

Vue 3 的响应式系统，核心就是 Proxy。它可以拦截对象上的各种操作，并在数据发生变化时通知依赖它的组件进行更新。简单来说，Proxy 就像一个守门员，任何对数据的读写操作都要经过它。而今天我们要聊的 in、has 和 ownKeys，就是守门员拦截的一些“特殊球”。

第一幕： in 操作符的秘密

in 操作符用于检查对象是否拥有某个属性。在 JavaScript 里，我们可以这样用：

const obj = { a: 1, b: 2 };
console.log('a' in obj); // true
console.log('c' in obj); // false

在 Vue 3 的响应式对象中，in 操作符的拦截有什么作用呢？答案是：它可以让 Vue 知道，你正在“尝试访问”某个属性。即使这个属性不存在，Vue 也要把它记录下来，因为将来这个属性可能会被动态添加进来。

让我们看一段 Vue 3 源码（简化版）：

const mutableHandlers = {
  has(target, key) {
    const result = key in target;
    if (!isSymbol(key) || !internalKeyRE.test(key)) {
      track(target, "has", key); // 追踪依赖
    }
    return result;
  },
};

function track(target, type, key) {
  // ... 依赖追踪逻辑
}

这段代码做了什么？

当使用 in 操作符时，has 拦截器会被触发。
它首先判断目标对象 target 是否真的包含该 key。
关键在于 track(target, "has", key) 这行代码。它会把当前组件（或者 effect）与目标对象 target 和属性 key 关联起来，建立依赖关系。

举个栗子：条件渲染

假设我们有这样一个模板：

<template>
  <div v-if="message in data">
    {{ data.message }}
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({});

    setTimeout(() => {
      data.message = 'Hello Vue 3!';
    }, 1000);

    return { data };
  },
};
</script>

在这个例子中，v-if="message in data" 会触发 Proxy 的 has 拦截器。即使 data 对象一开始没有 message 属性，Vue 也会记录下这个依赖关系。当 setTimeout 之后，data.message 被赋值时，Vue 会通知 v-if 指令重新求值，从而显示 "Hello Vue 3!"。

如果没有 in 操作符的拦截，Vue 就无法知道 v-if 依赖于 data.message 的存在性，也就无法在 data.message 改变时更新视图了。

第二幕： has 操作符的助攻

has 操作符和 in 操作符很像，也是用于检查对象是否拥有某个属性。区别在于，has 通常用于 Reflect.has() 这样的场景。

Vue 3 对 has 操作符的拦截和 in 操作符类似，都会触发依赖追踪。这样做是为了保持一致性，确保任何检查属性存在性的操作都能被响应式系统追踪到。

第三幕： ownKeys 操作符的妙用

ownKeys 操作符用于获取对象自身的所有属性键名（不包括原型链上的属性）。它返回一个数组，包含字符串类型的键名和 Symbol 类型的键名。

const obj = { a: 1, b: 2, [Symbol('c')]: 3 };
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(c)]
console.log(Reflect.ownKeys(obj)); // ['a', 'b', Symbol(c)]

在 Vue 3 中，ownKeys 操作符的拦截主要用于以下几个场景：

v-for 循环： 当我们使用 v-for 循环遍历对象时，Vue 需要知道对象的所有键名，才能生成对应的 DOM 元素。
Object.keys()、Object.values()、Object.entries()： 这些方法内部也会使用 ownKeys 操作符。
组件的渲染函数： 组件的渲染函数需要知道组件实例的所有属性，才能正确地渲染视图。

让我们看一段 Vue 3 源码（简化版）：

const mutableHandlers = {
  ownKeys(target) {
    track(target, "iterate", ITERATE_KEY); // 追踪依赖
    return Reflect.ownKeys(target);
  },
};

const ITERATE_KEY = Symbol("iterate");

这段代码做了什么？

当使用 ownKeys 操作符时，ownKeys 拦截器会被触发。
track(target, "iterate", ITERATE_KEY) 这行代码会把当前组件（或者 effect）与目标对象 target 关联起来，建立依赖关系。注意，这里使用的 key 是一个特殊的 Symbol：ITERATE_KEY。这表示我们依赖的是整个对象的迭代，而不是具体的某个属性。

举个栗子：v-for 循环

假设我们有这样一个模板：

<template>
  <ul>
    <li v-for="(value, key) in data" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({ a: 1, b: 2 });

    setTimeout(() => {
      data.c = 3;
    }, 1000);

    return { data };
  },
};
</script>

在这个例子中，v-for="(value, key) in data" 会触发 Proxy 的 ownKeys 拦截器。 Vue 会记录下 v-for 指令依赖于 data 对象的迭代。当 setTimeout 之后，data.c 被添加时，Vue 会通知 v-for 指令重新渲染，从而在列表中显示 "c: 3"。

如果没有 ownKeys 操作符的拦截，Vue 就无法知道 v-for 依赖于 data 对象的键名变化，也就无法在 data 对象添加新属性时更新列表了。

表格总结：in、has、ownKeys 的区别与联系

操作符	作用	触发的拦截器	依赖追踪的 `key`	常见应用场景
`in`	检查对象是否拥有某个属性	`has`	属性名	`v-if` 条件渲染
`has`	检查对象是否拥有某个属性（通常用于 `Reflect.has()`）	`has`	属性名	类似 `in` 操作符，保持一致性
`ownKeys`	获取对象自身的所有属性键名（不包括原型链上的属性）	`ownKeys`	`ITERATE_KEY`	`v-for` 循环、`Object.keys()`、`Object.values()`、`Object.entries()`、组件的渲染函数

深入思考：为什么需要拦截这些操作符？

Vue 3 的响应式系统之所以要拦截 in、has 和 ownKeys 这些操作符，是因为它们都涉及到对对象结构的“窥探”。只有拦截这些操作，Vue 才能完整地追踪对象的所有依赖关系，从而在数据发生变化时准确地更新视图。

进阶讨论：ITERATE_KEY 的作用

ITERATE_KEY 是一个特殊的 Symbol，用于表示对整个对象的迭代的依赖。当我们使用 v-for 循环遍历对象时，Vue 并不需要知道具体的哪个属性发生了变化，只需要知道对象的键名集合发生了变化即可。因此，Vue 使用 ITERATE_KEY 来表示这种“整体依赖”。

代码示例：手动触发依赖

有时候，我们需要手动触发依赖，例如，当我们修改了数组的长度时。我们可以使用 trigger 函数来实现：

import { reactive, effect, trigger, ITERATE_KEY } from 'vue';

const arr = reactive([1, 2, 3]);

effect(() => {
  console.log('数组发生变化了！', arr.length);
});

arr.length = 1;
trigger(arr, 'length', undefined); // 手动触发依赖

在这个例子中，即使我们修改了数组的长度，Vue 也不会自动更新视图。因为 Vue 默认只追踪数组的索引访问和修改，而不追踪 length 属性的变化。为了解决这个问题，我们需要手动调用 trigger 函数，并传入 ITERATE_KEY 作为 key，来触发对整个数组迭代的依赖。

总结：Proxy，响应式系统的基石

Proxy 是 Vue 3 响应式系统的基石。通过拦截各种操作符，Proxy 能够追踪对象的所有依赖关系，并在数据发生变化时准确地更新视图。理解 in、has 和 ownKeys 这些操作符的拦截机制，可以帮助我们更好地理解 Vue 3 的响应式原理，从而编写出更高效、更健壮的 Vue 应用。

彩蛋：Vue 3 的性能优化

Vue 3 在响应式系统方面做了很多性能优化。例如，它使用了静态标记（static flag）来减少不必要的更新。静态标记可以告诉 Vue，某个组件的哪些部分是静态的，哪些部分是动态的。这样，Vue 就可以只更新动态的部分，从而提高渲染性能。

结束语：响应式，无处不在

响应式编程已经成为现代前端开发的重要范式。 Vue、React、Angular 等框架都采用了响应式思想。掌握响应式编程的原理，可以帮助我们更好地理解这些框架的设计思想，从而更好地使用它们。

今天的分享就到这里，感谢各位的观看！希望大家有所收获！如果有什么问题，欢迎在评论区留言。咱们下次再见！

发表回复 取消回复

发表回复取消回复