素材巴巴 > 程序开发 >

vue2.0数据更新,重新渲染视图的三种方法

程序开发 2023-09-10 17:28:43

问题:利用v-for渲染数据,通过方法改变了数据,视图没有更新。

原因:由于javascript的限制,Vue不能检测到以下变动的数组(如:objArr):

1.通过索引直接设置数组的某个值,this.objArr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性,this.objArr[index].pro = newValue;

3.通过修改数组的长度,this.objArr.length = newLength;

解决重点:实现类似this.objArr[index] = newValue的效果,同时能更新视图

解决办法:

1.索引直接设置数组的某个值

//1.Vue.set
 Vue.set(this.objArr,index,newValue)  //(数组,索引,值)//2.prototype.splice
 this.objArr.splice(index,1,newValue) //(索引,长度,值)//3.Object.assign
 this.objArr[index] = newValue
 this.objArr = Object.assign({},this.objArr) //存在弊端,该objArr的类型会从数组变成对象

2.索引直接设置数组中对象的某个属性

//1.Vue.set
 this.objArr[index].pro = newValue
 var tempObj = this.objArr[index]
 Vue.set(this.objArr,index,tempObj)  //(数组,索引,值)//2.prototype.splice
 this.objArr[index].pro = newValue
 var tempObj = this.objArr[index]
 this.objArr.splice(index,1,tempObj) //(索引,长度,值)//3.Object.assign
 this.objArr[index].pro = newValue
 this.objArr = Object.assign({},this.objArr) //存在弊端,该objArr的类型会从数组变成对象

3.修改数组的长度

//1.prototype.splice
 this.objArr.splice(this.objArr.length,0,new Object()) //(索引,长度,值) 从长度索引开始增加一个新的对象。//2.Object.assign
 this.objArr.length = newLength
 this.objArr = Object.assign({},this.objArr) //存在弊端,该objArr的类型会从数组变成对象

解决实例:

下载地址

推荐阅读:

事件捕获、事件冒泡详解

JS将数字转成货币形式的简单方法

 一款好玩的电子木鱼小程序

 

效果

 

 

 


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。