前端面试题26（vue3中响应式实现原理）

Vue 3 中响应式系统的实现主要依赖于 ES6 的 Proxy 对象，这与 Vue 2 中使用 Object.defineProperty 的方式有着本质的区别。Proxy 提供了一种更为强大且灵活的方法来拦截和定制对象的操作，例如获取、设置属性值等。下面是对 Vue 3 响应式系统实现方式的详细解析：

1. 数据劫持

在 Vue 3 中，当你使用 reactive 函数包装一个对象时，实际上是在创建一个基于 Proxy 的代理对象。这个代理对象会拦截所有对原始对象的访问和修改操作。

import { reactive } from 'vue';

const state = reactive({ count: 0 });

在这个例子中，state 对象实际上是一个 Proxy，它代理了 { count: 0 } 对象的所有操作。

2. 依赖收集

当一个组件或函数访问 state.count 属性时，Proxy 的 get 方法会被触发。此时，Vue 3 的响应式系统会记录下这次访问，从而建立起一个依赖关系。这意味着如果 state.count 的值发生了变化，那么所有依赖它的观察者（比如组件中的模板表达式或计算属性）都会被标记为“脏”（outdated）。

const computedCount = computed(() => state.count);

在上面的例子中，computedCount 计算属性现在依赖于 state.count 的值。

3. 派发更新

当 state.count 的值通过 Proxy 的 set 方法被改变时，响应式系统会遍历所有依赖于 state.count 的观察者，并通知它们数据已经更新。这些观察者随后会被重新执行，以反映最新的数据状态。对于组件而言，这就意味着重新渲染以更新 UI。

4. 副作用函数与调度

Vue 3 引入了副作用函数的概念，这是通过 effect 函数来创建的。副作用函数会在依赖的响应式数据发生变化时自动重新执行。Vue 3 还提供了调度机制，确保副作用函数的执行时机是最优的，通常是在组件更新周期的适当阶段。

const effectFn = effect(() => {
  console.log(state.count);
});

在这个例子中，每次 state.count 的值发生变化，effectFn 都会被重新执行。

5. 其他响应式 API

除了 reactive，Vue 3 还提供了其他的响应式 API，比如 ref 和 shallowReactive 等。ref 创建的是一个具有 .value 属性的对象，而 shallowReactive 则仅让对象的第一层属性变为响应式的。

综上所述，Vue 3 的响应式系统是基于 Proxy 的数据劫持、依赖收集和更新派发机制构建的，这一机制比 Vue 2 更加高效和强大，同时也支持更广泛的数据类型和结构。