如何解决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]=999this.$set(this.arr,this.arr.length,999)}
}

除此之外我们还有一种方法

data:{arr:[1,2,3,4]
},
methods:{add(){arr[arr.length]=999this.arr=JSON.parse(JSON.stringify(this.obj))//这样也可以解决}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！