vue中数据响应式选择ref还是reactive?

vue中响应式选择ref还是reactive合适

语法上来说,两者都可以实现响应式,之所以有ref和reactive,是为了更加方便的将不同的数据类型分类处理。

主要区别:reactive只能声明对象/数组,ref可以响应任意数据类型,但是使用时需要加.value进行解包。

但是在使用时,reactive直接赋值非常容易丢失响应式。推荐使用ref。

1.给响应式对象赋值。丢失响应式

javascript 复制代码
let arr = reactive([1,2])
//直接赋值或使用push等将导致state失去响应
arr=[3,4,5]
let obj =reactive({ id: 0 })
//这种方式失去响应式
obj = {id:1}
//给对应的属性赋值会保持响应式
obj.id = 1;


//使用ref就不会失去响应式,并且.value会提示你这是一个响应式数据
let arr2 = ref([1,2])
arr2.value = [3,4,5]

2.尤其是数组和对象,使用时需要特别注意

解构对象时,要想保持对象的响应式,注意使用toRefs函数,否则会失去响应式

javascript 复制代码
const obj = reactive({ data: 0 })
//使用toRefs解构,才不会丢失响应式
let { data } = toRefs(obj)
相关推荐
minDuck3 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!24 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。29 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼36 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093339 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂2 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙