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'; // 修改属性值
相关推荐
小墨宝3 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED18 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿22 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子23 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6635 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架