Vue 3 中的响应式原理

Vue 3 的响应式系统基于 Proxies，它使用 Proxy 对象来替代 Vue 2 中的 Object.defineProperty。Proxy 可以直接监听对象的操作，而无需像 Object.defineProperty 那样需要针对每个属性进行封装。

以下是一个简单的响应式示例：

const { reactive, effect, computed } = Vue;
 
// 创建一个响应式对象
const state = reactive({
  count: 0,
  double: computed(() => state.count * 2)
});
 
// 创建一个副作用函数
effect(() => {
  console.log(`count is: ${state.count}, double is: ${state.double}`);
});
 
// 修改响应式对象的属性
setTimeout(() => {
  state.count++;
}, 1000);

在这个例子中，我们首先通过 reactive 函数创建了一个响应式对象 state。然后，我们使用 effect 创建了一个副作用函数，它会在 state.count 或 state.double 改变时被触发。最后，我们设置了一个定时器，在1秒后将 state.count 的值增加1，从而触发副作用函数的执行。

这个例子展示了 Vue 3 响应式系统的基本使用方法。