vue 修改数组数据界面不渲染视图的解决方法汇总

本文链接：https://blog.csdn.net/guoqing2016/article/details/103863624

使用vue进行开发时，我们经常会遇到对已经渲染在界面上的数组进行修改参数时，参数修改之后并不会更新界面的信息，但是实际上数组的参数是已经修改到了，只是vue没有进行视图的更新渲染，下面列举了多种的解决方法…

对此，vue官服也有在教程中有所提到：
vue官方
下面就来汇总一下可以更新视图方法
假设我们当前的数组为:

	demoList:[{
		name: "gq",
		value: "demo"
	}]

1、使用 Vue.set --该方法是官服提出的解决方法之一
vue官方

	this.demoList[0].name = "demo";
	this.$set(this.demoList[0], name, 改demo的值); //可以这样的写法

2、使用数组的splice方法 --该方法是官服提出的解决方法之一
vue官方

	let obj = {
		name: "demo1",
		value: "demo1"
	};
	this.demoList.push(obj); //push之后是会自动进行界面的渲染
	this.demoList[1].name = "ccc"; //而后进行参数修改之后，博主遇到过无法进行渲染的情况，这个时候使用第一种也无效
	this.demoList.splice(this.demoList.lenght); //更新渲染

3、使用forceUpdate强制刷新
当数据层次很多时也会遇到不刷新视图的情况

	this.demoList[0].name = "demo";
	this.$forceUpdate(); //在修改参数后加上这句进行强制刷新视图

4、使用深拷贝进行视图刷新

	this.demoList[0].name = "demo";
	this.demoList = JSON.parse(JSON.stringify(this.demoList)); //使用JSON进行深拷贝，如果数组中有空参的对象，会消失，并且不会继承原型链上的方法
	// 或者直接去写一个实现深拷贝的方法