vue3中ref和reactive联系与区别以及如何选择

vue3中ref和reactive区别与联系

区别

1、ref既可定义基本数据类型,也可以定义引用数据类型,reactive只能定义应用数据类型

2、ref在js中取响应值需要使用 .value,而reactive则直接取用既可

3、ref定义的对象通过.value重新分配新对象时依旧保持数据响应式,而reactive重新分配新对象会失去响应式

4、使用ref定义引用数据类型时,通过watch监听该响应式对象如果未配置deep: true,当改变对象属性时,不会触发watch,只有重新分配新对象才会触发watch,配置deep: true才会触发,且会导致newVal和oldVal是一样的,(因为watch监听的是地址,只改变属性值时地址是不变的);而reactive定义的对象默认开启deep: true,且无法关闭,改变对象属性,会触发watch。

例子

javascript 复制代码
// 例1:(区别1)
let name = ref('张三');
let userInfo = ref({age: 18, address: '北京市天安门'});
let studyInfo = reactive({school: '清北大学', score: 100});

// 例2:(区别2)
name.value;  // 张三
userInfo.value.age; // 18
userInfo.value.address;  // 北京市天安门
studyInfo.school;  // 清北大学
studyInfo.score; // 100

// 例3:(区别3)
name.value = "zhangsan";  // 页面上的数据会响应式更新,张三 --> zhangsan
userInfo.value = {age: 22, address: '上海市陆家嘴'};  // 页面也会响应式更新userInfo的相关数据
studyInfo = {school: '复交大学', score: 99};  // 页面不会响应式更新studyInfo,但是js里的studyInfo 实际是变了的
// 解决studyInfo失去响应式的问题
Object.assign(studyInfo, {school: '复交大学', score: 99});  // 这样就可以响应式更新了
// 错误写法
studyInfo = reactive({school: '复交大学', score: 99});  // studyInfo实际已经是个新reactive对象了

联系

ref定义的引用数据类型,实际也在内部调用了reactive,value中返回的依旧是个proxy

补充

如果使用ref不想手敲.value时,可以在volar插件中配置 Dot Value,勾选上,会自动给你补齐.value

开发中如何选择ref还是reactive

1、定义基本数据类型必须用ref;

2、定义层级不深的响应式对象ref和reactive均可;

3、定义层级比较深的响应式对象,推荐使用reactive;

4、定义表单的话推荐使用reactive。

以上只是建议,非强制性。

欢迎补充指正

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui