解释 ref和 reactive 区别
简述
在Vue 3中，ref 和 reactive 都是用来创建响应式数据的工具，但它们有一些区别。
ref：
-
•
ref是用来创建一个包裹基本数据类型（如数字、字符串等）的响应式对象。 -
• 当你需要包装一个基本类型的值，并且希望该值是响应式的，你可以使用
ref。 -
• 通过访问
.value属性来获取包装的值，或者通过修改.value属性来更新该值。 -
-
示例：
-
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出: 0
count.value++; // 更新值reactive：
-
•
reactive用于创建一个包裹对象的响应式代理。 -
• 当你需要包装一个对象，并且希望对象内部的属性是响应式的，你可以使用
reactive。 -
• 通过直接访问和修改对象的属性来实现对对象的响应式跟踪。
-
-
示例：
-
import { reactive } from 'vue';
const state = reactive({
count: 0
});
console.log(state.count); // 输出: 0
state.count++; // 更新对象属性值ref 适用于包装基本数据类型，而 reactive 适用于包装对象。
当需要处理基本数据类型时，使用 ref 更方便；而当处理对象时，使用 reactive 更为合适。
深入理解
ref 和 reactive 的实现原理涉及到 Vue 3 的响应式系统和 ES6 的 Proxy 对象。
ref 实现原理：
-
• 在内部，
ref实际上是使用了一个名为Ref的类来封装基本类型的数据。 -
• 当你使用
ref创建一个响应式的变量时，Vue 3 实际上会创建一个Ref类的实例，该实例包装了你提供的基本类型的值。 -
•
Ref类内部利用了一个名为value的属性来存储和追踪值的变化。同时，它还利用了 Vue 3 的响应式系统来确保当value发生变化时，相关的视图能够及时更新。
reactive 实现原理：
-
•
reactive的实现原理涉及到 ES6 的 Proxy 对象，它允许你创建一个代理对象，拦截对目标对象属性的访问和修改。 -
• 当你使用
reactive包装一个对象时，Vue 3 实际上会使用 Proxy 来创建这个对象的一个代理，从而实现对对象内部属性的访问和修改进行拦截。 -
• 当代理对象的属性被访问或修改时，Vue 3 的响应式系统会负责通知相关的视图进行更新，以确保视图与数据的同步。
总结
ref 和 reactive 是 Vue3 数据响应式中非常重要的两个概念。
-
• reactive 用于处理对象类型的数据响应式。底层采用的是 new Proxy()
-
• ref 通常用于处理单值的响应式，ref 主要解决原始值的响应式问题。底层采用的是Object.defineProperty()实现的
源码解析
ref
注意：RefImpl函数
注意：toReactive函数
reactive
注意：createReactiveobject函数
原文始发于微信公众号（前端爱好者）：解释 ref和 reactive 区别
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267351.html
![[js进阶]成为前端大师，看这20个github库就够了](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading-480x300.gif)