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

青旅半醒 2023-06-27 12:42 7阅读 0赞

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

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

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

**1、使用 `Vue.set`** \--该方法是官服提出的解决方法之一  
![vue官方][vue 1]

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

**2、使用数组的`splice`方法** \--该方法是官服提出的解决方法之一  
![vue官方][vue 2]

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进行深拷贝，如果数组中有空参的对象，会消失，并且不会继承原型链上的方法
    	// 或者直接去写一个实现深拷贝的方法

5、待补充…

[vue]: https://img-blog.csdnimg.cn/20200106193801612.png
[vue 1]: https://img-blog.csdnimg.cn/20200106194318536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2,size_16,color_FFFFFF,t_70
[vue 2]: https://img-blog.csdnimg.cn/20200106195925451.png