录音转文字网站开发,注册公司网址,网页制作学什么内容,建行官方网站 - 百度vue3中ref和reactive区别与联系
区别
1、ref既可定义基本数据类型#xff0c;也可以定义引用数据类型#xff0c;reactive只能定义应用数据类型 2、ref在js中取响应值需要使用 .value#xff0c;而reactive则直接取用既可 3、ref定义的对象通过.value重新分配新对象时依旧…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。
例子
// 例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定义的引用数据类型实际也在内部调用了reactivevalue中返回的依旧是个proxy
补充
如果使用ref不想手敲.value时可以在volar插件中配置 Dot Value勾选上会自动给你补齐.value
开发中如何选择ref还是reactive
1、定义基本数据类型必须用ref 2、定义层级不深的响应式对象ref和reactive均可 3、定义层级比较深的响应式对象推荐使用reactive 4、定义表单的话推荐使用reactive。 以上只是建议非强制性。 欢迎补充指正
