我想做京东网站淘宝怎么做的,成都网站制作成都网站制作,无锡门户网站制作电话,云教育科技网站建设为什么推荐使用ref而不是reactive reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象; 先抛出结论,再详细说原因:非必要不用rea…为什么推荐使用ref而不是reactive reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象; 先抛出结论,再详细说原因:非必要不用reactive! (官方文档也有对应的推荐)
官方原文:建议使用 ref() 作为声明响应式状态的主要 API。
最懂Vue的人都这么说了:推荐ref!!! reactive和 ref 对比
reactiveref❌只支持对象和数组(引用数据类型)✅支持基本数据类型引用数据类型✅在 script 和 template 中无差别使用❌在 script 和 template 使用方式不同(script中要.value)❌重新分配一个新对象会丢失响应性✅重新分配一个新对象不会失去响应能直接访问属性需要使用 .value 访问属性❌将对象传入函数时,失去响应✅传入函数时,不会失去响应❌解构时会丢失响应性,需使用toRefs❌解构对象时会丢失响应性,需使用toRefs
ref 用于将基本类型的数据如字符串、数字布尔值等和引用数据类型(对象) 转换为响应式数据。使用 ref 定义的数据可以通过 .value 属性访问和修改。reactive 用于将对象转换为响应式数据包括复杂的嵌套对象和数组。使用 reactive 定义的数据可以直接访问和修改属性。
原因1:reactive有限的值类型
reactive只能声明引用数据类型(对象)
let obj reactive({name: 小明,age : 18
})ref既能声明基本数据类型,也能声明对象和数组; Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式 ref //对象
const state ref({})
//数组
const state2 ref([])原因2:reactive使用不当会失去响应: reactive一时爽,使用不恰当的时候失去响应泪两行,开开心心敲代码过程中,会感叹!!咦?怎么不行?为什么这么赋值失去响应了? 辣鸡reactive!!! 我要用 ref yyds 1. 给reactive赋一整个普通对象/reactive对象 通常在页面数据回显时,需要将AJAX请求获取的对象直接赋值给响应式对象,如果操作不当就导致reactive声明的对象失去响应 赋值一个普通对象 let state reactive({ count: 0 })
//这个赋值将导致state失去响应
state {count: 1}赋值一个reactive对象 如果给reactive的响应式对象赋值普通对象会失去响应,那么给它赋值一个reactive的响应式对象不就行了吗?下面试试看
template{{state}}
/template
stcirpt setup
const state reactive({ count: 0 })//nextTick异步方法中修改state的值
nextTick(() {//并不会触发修改DOM ,说明失去响应了state reactive({ count: 11 });
});
/stcirpt在nexTick中给state赋值一个reactive的响应式对象,但是DOM并没有更新!
解决方法: 不要直接整个对象替换,对象属性一个个赋值 let state reactive({ count: 0 })
//state{count:1}
state.conut 1 使用Object.assign let state reactive({ count: 0 })
// state {count:1} state失去响应
state Object.assign(state , {count:1})使用ref定义对象 非必要不用reactive let state ref({ count: 0 })
state.value{count:1}为什么同样是赋值对象ref不会失去响应而reactive会?
ref 定义的数据包括对象时返回的对象是一个包装过的简单值而不是原始值的引用; 就和对象深拷贝一样,是将对象属性值的赋值 reactive定义数据必须是对象reactive返回的对象是对原始对象的引用而不是简单值的包装。 类似对象的浅拷贝,是保存对象的栈地址,无论值怎么变还是指向原来的对象的堆地址; reactive就算赋值一个新的对象,reactive还是指向原来对象堆地址 2.将reactive对象的属性-赋值给变量(断开连接/深拷贝) 这种类似深拷贝不共享同一内存地址了,只是字面量的赋值;对该变量赋值也不会影响原来对象的属性值 let state reactive({ count: 0 })
//赋值
// n 是一个局部变量同 state.count
// 失去响应性连接
let n state.count
// 不影响原始的 state
n
console.log(state.count) //0有人就说了,既然赋值对象的属性,那我赋值一整个对象不就是浅拷贝了吗?那不就是上面说的给响应式对象的字面量赋一整个普通对象/reactive对象这种情况吗?这种是会失去响应的
3.直接reactive对象解构时
直接解构会失去响应
let state reactive({ count: 0 })
//普通解构count 和 state.count 失去了响应性连接
let { count } state
count // state.count值依旧是0解决方案: 使用toRefs解构不会失去响应 使用toRefs解构后的属性是ref的响应式数据
const state reactive({ count: 0 })
//使用toRefs解构,后的属性为ref的响应式变量
let { count } toRefs(state)
count.value // state.count值改变为1建议: ref一把梭 当使用reactive时,如果不了解reactive失去响应的情况,那么使用reactive会造成很多困扰! 推荐使用ref总结原因如下: reactive有限的值类型:只能声明引用数据类型(对象/数组) reactive在一些情况下会失去响应,这个情况会导致数据回显失去响应(数据改了,dom没更新) 给响应式对象的字面量赋一整个普通对象,将会导致reactive声明的响应式数据失去响应 template{{state.a}}{{state.b}}{{state.c}}
/template
scriptlet state reactive({ a:1,b:2,c:3 })onMounted((){//通AJAX请求获取的数据,回显到reactive,如果处理不好将导致变量失去响应,//回显失败,给响应式数据赋值一个普通对象state { a:11,b:22,c:333 }//回显成功,一个个属性赋值 state.a 11state.b 22state.c 33 })
/script上面这个例子如果是使用ref进行声明,直接赋值即可,不需要将属性拆分一个个赋值 使用ref替代reactive: template{{state.a}}{{state.b}}{{state.c}}
/template
scriptlet state ref({ a:1,b:2,c:3 })onMounted((){//回显成功state.value { a:11,b:22,c:333 }})
/scriptref适用范围更大,声明的数据类型.基本数据类型和引用数据类型都行
虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;
ref的.value小尾巴好麻烦!
ref声明的响应式变量携带迷人的.value小尾巴,让我们一眼就能确定它是一个响应式变量!虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;
可能有些人不喜欢这个迷人小尾巴,如果我能自动补全阁下又如何应对?
volar插件能自动补全.value (强烈推荐!!!) 本人推荐ref一把梭,但是ref又得到处.value ,那就交给插件来完成吧!!! valor 自动补全.value (不是默认开启,需要手动开启) 不会有人不知道Vue3需要不能使用vetur要用valor替代吧?不会不会吧? (必备volar插件) 可以看到当输入ref声明的响应式变量时,volar插件自动填充.value 那还有啥烦恼呢? 方便!
本文会根据各位的提问和留言持续更新; 别骂了_我真的不懂vue 说(总结挺好的,因此摘抄了): reactive 重新赋值丢失响应是因为引用地址变了被proxy代理的对象已经不是原来那个所以丢失响应了其实ref也是一样的当把.value那一层替换成另外一个有着.value的对象也会丢失响应 ref定义的属性等价于reactive{value:xxx} 另外说使用Object.assign为什么可以更新模板 Object.assign解释是这样的 如果目标对象与源对象具有相同的键属性名则目标对象中的属性将被源对象中的属性覆盖后面的源对象的属性将类似地覆盖前面的源对象的同名属性。 那个解决方法里不用重新赋值直接Object.assignstate,{count:1}即可所以只要proxy代理的引用地址没变就会一直存在响应性
