vue操作数组,数据改变,视图不更新原因及解决方案

k6丶

于 2021-11-11 15:39:15 发布

阅读量2.4k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52724742/article/details/121269143

版权

vue操作数组,数据改变,视图不更新原因及解决方案

原因:

vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view.

解决方案:

1.使用 $set() 方法手动设置;

	$set(targetObj,key,value)//接受三个参数,(目标对象,属性名/index,属性值)
	eg:$set(list,0,'aaa')//把数组第0项修改为'aaa'
	
2.使用 $forceUpdate() 方法强制更新;	

	eg: list[0]='aaa';
		$forceUpdate()