请简述Vue3.x 响应式数据原理是什么？（ 重点 ）
Vue 3.x 的响应式系统是基于 ES6 的 Proxy 对象和 Reflect 对象实现的，相比于 Vue 2.x 使用的 Object.defineProperty，Proxy 可以直接监听对象而非属性，它可以拦截并定义基本操作的行为，如属性查找、赋值、枚举、删除等。
下面是 Vue 3.x 响应式系统的基本原理：
- 数据劫持：当我们使用
reactive或ref创建响应式数据时，Vue 3.x 会使用Proxy创建一个代理对象，对原始对象进行劫持。Proxy可以拦截对象的多种操作，包括获取属性值、设置属性值、删除属性等。 -
依赖收集：当我们首次访问属性值时，
Proxy的get陷阱会被触发。在get陷阱中，Vue 3.x 会把当前正在执行的副作用函数（即响应式效果函数）添加到当前属性的依赖列表中。这个过程叫做依赖收集。 -
派发更新：当我们修改属性值时，
Proxy的set陷阱会被触发。在set陷阱中，Vue 3.x 会遍历当前属性的依赖列表，执行每个依赖（副作用函数）。这个过程叫做派发更新。
举个例子，假设我们有一个响应式对象 data：
const data = reactive({ count: 0 });
当我们在组件的 setup 函数中使用 data.count 时：
watchEffect(() => {
console.log(data.count);
});
Vue 3.x 会在 Proxy 的 get 陷阱中，把 console.log(data.count) 这个副作用函数添加到 count 属性的依赖列表中。
当我们修改 data.count 时：
data.count++;
Vue 3.x 会在 Proxy 的 set 陷阱中，遍历 count 属性的依赖列表，执行每个副作用函数。所以，console.log(data.count) 会被执行，打印出新的 count 值。
通过这种方式，Vue 3.x 实现了数据的响应式。只要数据发生变化，所有依赖这个数据的地方都会自动更新。