vue3 的ref和reactive的区别?

ref和reactive都是创建响应式数据的方式,它们的数据类型,使用场景以及性能有所不同,如:

1数据类型:

ref:主要用于创建单个变量的响应式引用,无论数据类型是基本数据类型还是引用数据类型,ref都能吧它封装一个响应式实体,它返回的是一个对象,如果访问需要使用value来读取对象中的数据

reactive:主要适用于复杂数据类型,比如数组对象,它返回的是proxy对象,可以直接访问

2使用场景:

ref:需要创建一个响应式的基本数据类型时使用,如简单的计数器或标志位

reactive:需要创建一个响应式的复杂对象或者数组时使用,如用户信息管理或嵌套数据结构

3性能:

ref:对基本数据类型,ref通常具有更高的性能,因为它减少了,proxy的使用,简化了应用系统的恶实现

reactive:对复杂的数据结构reactive通过使用proxy直接操作对象属性,提供了更好的灵活性能和响应式追踪机制

import { ref, reactive } from 'vue';

// 使用ref创建响应式基本数据类型
let count = ref(0);
console.log(count.value); // 输出0
count.value++; // 增加计数器

// 使用reactive创建响应式复杂对象
let user = reactive({
  name: 'Alice',
  age: 30,
});
console.log(user.name); // 输出Alice
user.name = 'Bob'; // 修改属性值
相关推荐
坊钰7 分钟前
【Java 数据结构】如何写一副扑克牌 (附:全部码源) !!!
java·开发语言·前端·数据结构·学习
秃头小锦鲤9 分钟前
网页核心页面设计(第10章)
前端·javascript·css·html·css3·html5
高山我梦口香糖33 分钟前
[react] 优雅解决typescript动态获取redux仓库的类型问题
前端·react.js·typescript
Serendipity26139 分钟前
JavaScript类型
前端·javascript
万维——组态40 分钟前
web组态可视化编辑器
前端·物联网·低代码·编辑器·流程图·组态
飞舞花下43 分钟前
vue el-dialog实现可拖拉
前端·javascript·vue.js
决斗小饼干1 小时前
大文件传输与断点续传实现(极简Demo:React+Node.js)
前端
铅华尽1 小时前
前端JavaScript(六)---JS中的事件
开发语言·前端·javascript
肉肉心很软1 小时前
本地项目显示正常,打包部署后ElementUI重点饿图标全部显示异常为小方框
前端·elementui
那你能帮帮我吗1 小时前
element-ui的el-color-picker颜色选择器组件,弹窗定位在左上角的问题排查和解决
前端·element