发布时间:2023-08-13 17:00
最近比较忙,都没什么时间学习了。
在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同。在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性。然后赋值是我们经常进行的操作,那么该怎么解决呢?
1. 改为ref定义
const arr= ref([]) arr.value = [1, 2, 3]
2. push新增数据
const arr = reactive([]) arr.push(...[1, 2, 3])
3.再封装一层数据(推荐!)
const state = reactive({ arr: [] }); state.arr = [1, 2, 3]
但是这样的话在html模板里,使用数据就得state.arr
所以我们可以用解构将它return出来
但是reactive解构出来的数据会丢失响应性
所以再用torefs()方法为它们添加响应性
最终为:
const state = reactive({ arr: [] }); state.arr = [1, 2, 3] return{ ...toRefs(state), }
看了好多方法,先都存着。
setup(props) { //a赋值的时候多套一层对象值赋到a的属性a上 let a=reactive({a:{id:1,name:\'小明\'}}) Object function fn(){ //改值时就可以直接给a.a赋值了 a.a={id:2,name:\'小黄\'} console.log(a); } return { fn,a } }
const data= ref([]) data.value = [1, 2, 3]
let a=reactive({id:1,name:\'小明\'}) function fn(){ Object.assign(a,{id:2,name:\'大明\'}) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。