reactive
reactive 函数用于创建响应式对象。它接受一个普通对象，并返回一个代理对象，该代理对象会在访问或修改时触发更新。这里使用了 ES6 中的 Proxy 对象，可以监听对象上的操作。
import { reactive } from 'vue';
const state = reactive({
count: 0
});
console.log(state.count); // 访问属性，触发依赖收集
state.count++; // 修改属性，触发更新
ref
ref 函数用于创建包装基本类型的响应式对象。它返回一个包含 .value 属性的对象。当访问或修改 .value 时，会触发更新。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 访问属性，触发依赖收集
count.value++; // 修改属性，触发更新
响应性原理
1. 响应式对象的创建
当使用 reactive 或 ref 创建响应式对象时，Vue 3.0 会使用 Proxy 对象包装原始对象，创建一个代理对象。这个代理对象允许 Vue 追踪对原始对象的访问和修改。
2. 依赖收集
当访问代理对象的属性时，Vue 会进行依赖收集。这意味着 Vue 会追踪正在读取的属性，将当前组件的渲染函数与该属性建立关联。
3. 派发更新
当代理对象的属性被修改时，Vue 会派发更新。这时，与该属性相关的渲染函数会重新执行，以确保界面和状态保持同步。
4. 嵌套依赖收集
Vue 3.0 能够在嵌套结构中进行依赖收集。这意味着当访问对象的嵌套属性时，也会进行依赖收集。这使得嵌套结构的响应式更新变得更加直观和灵活。
5. 数组的响应性
对于数组，Vue 3.0 使用了原型链拦截的方式，通过 Proxy 拦截数组的一些变更操作，从而实现对数组的响应性。
6. 异步更新队列
Vue 3.0 采用了异步更新队列的机制，确保在同一事件循环中的多个状态更新被合并，从而提高性能。
这是一个非常简略的描述，Vue 3.0 的响应性系统有很多细节和优化。了解这些原理可以帮助你更好地理解 Vue 的工作方式，并在需要时更好地调试和优化代码。
转载请注明出处：http://www.zyzy.cn/article/detail/514/Vue 3.0