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)
相关推荐
haima9523 分钟前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐31 分钟前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲31 分钟前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲37 分钟前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人1 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站1 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
yun_shuo1 小时前
文件内容扫描工具
electron·node.js·vue
理想不理想v1 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js
fhf1 小时前
感觉根本等不到35岁AI就把我裁了
前端·人工智能·程序员
hummhumm1 小时前
第 36 章 - Go语言 服务网格
java·运维·前端·后端·python·golang·java-ee