如何解决vue2数据更新视图不更新
因为vue2和vue3的执行机制有所不同,v2是通过object.defindProperty,监听对象新增或修改某一个属性的时候会触发,所以会出现数据更新视图不更新的情况,而v3则是通过es6的proxy监听整个对象的变化
当发生数据更新视图不更新时我们可以使用this.$set()来解决
对象:写法
data:{
obj:{
a:1,
b:2,
}
}
methods:{
add(){
//this.obj.c=10//给obj添加属性及属性值
// console.log(this.obj)//obj发生了变化,但是视图并未更新
this.$set(this.obj,"c",10)//这时候就可以用到this.$set()来强制更新
//语法为this.$set(变化的值,"新增属性/下标",新增的值)
}
}
数组写法:
data:{
arr:[1,2,3,4]
},
methods:{
add(){
//arr[arr.length]=999
this.$set(this.arr,this.arr.length,999)
}
}
除此之外我们还有一种方法
data:{
arr:[1,2,3,4]
},
methods:{
add(){
arr[arr.length]=999
this.arr=JSON.parse(JSON.stringify(this.obj))//这样也可以解决
}
}