如何解决vue2数据更新视图不更新

如何解决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))//这样也可以解决
	}
}