浅谈Vue3中的reactive跟ref的区别以及源码实现
最新回答
天天
2021-08-14 00:43:19
ref 的使用包括声明与访问，以及在模板中的应用。ref 实现通过简单对象封装值，并通过 getRef 和 setRef 函数更新，模拟依赖收集与更新触发。ref 作为访问器属性，通过 get 和 set 方法提供访问和更新。
reactive 的使用同样包括声明与访问，以及在模板中的应用。reactive 通过 Proxy 对象创建代理，对对象的所有属性进行拦截，触发 get 或 set 钩子函数，实现依赖关系维护和更新触发。reactive 可以追踪对象任意层级属性的变化，适用于复杂数据结构的深度响应式。
在底层实现上，ref 通过简单对象和访问器属性实现响应式，更新成本较低。reactive 利用 Proxy 对象创建代理，实现深度响应式，能够追踪对象任意层级属性变化。
手写 ref 函数通过闭包存储实际值，使用 getRef 和 setRef 函数获取和设置值，并模拟依赖收集与更新触发。手写 reactive 函数利用 Proxy 对象，定义 get、set、deleteProperty 等操作符的处理器，实现依赖收集和更新触发。
在实际应用中，应根据数据结构的复杂性、响应式需求的深度以及与模板交互的便利性选择使用 ref 或 reactive。对于简单数据类型或单一对象/数组优先考虑 ref，对于复杂数据模型则应使用 reactive。正确运用这两个工具，能充分发挥 Vue 3 Composition API 的效能。
热门标签
