Vue 3.2 中 ref 和 reactive 的区别：底层原理、用法对比

在 Vue 3.2 中，'ref' 和 'reactive' 是用于创建响应式数据的两种方式。

1. 区别：

• 'ref' 用于创建单个响应式数据，返回一个包装后的对象，可以通过 '.value' 访问和修改数据。而 'reactive' 用于创建一个包含多个属性的响应式数据对象。
• 'ref' 创建的数据是基本类型的包装对象，而 'reactive' 创建的数据是一个普通的 JavaScript 对象。
• 'ref' 创建的数据是浅响应式的，只有在访问时才会进行依赖追踪，而 'reactive' 创建的数据是深响应式的，会对整个对象进行依赖追踪。

2. 底层实现原理：

• 'ref' 使用了 'Proxy' 来包装数据对象，通过 'get' 和 'set' 拦截器进行依赖追踪和触发更新。
• 'reactive' 使用了 'Proxy' 和 'Reflect' 来包装数据对象，通过 'get' 和 'set' 拦截器进行依赖追踪和触发更新。同时，'reactive' 还使用了 'WeakMap' 来存储依赖关系。

3. 用法：

• 'ref' 使用方式：'const refValue = ref(initialValue)'，可以通过 'refValue.value' 来访问和修改数据。
• 'reactive' 使用方式：'const reactiveObj = reactive({ key: value })'，可以通过 'reactiveObj.key' 来访问和修改数据。

总结：'ref' 适用于创建单个基本类型的响应式数据，'reactive' 适用于创建包含多个属性的响应式数据对象。在底层实现上，'ref' 和 'reactive' 都使用了 'Proxy' 来进行依赖追踪和触发更新，但 'reactive' 还使用了 'WeakMap' 来存储依赖关系。用法上，'ref' 需要通过 '.value' 来访问和修改数据，而 'reactive' 直接访问属性即可。