vue2.0数据更新,重新渲染视图的三种方法
问题:利用v-for渲染数据,通过方法改变了数据,视图没有更新。原因:由于javascript的限制,Vue不能检测到以下变动的数组(如:objArr):1.通过索引直接设置数组的某个值,this.objArr[index] = newValue;2.通过索引直接设置数组中对象的某个属性,this.objArr[index].pro = newValue;3.通过...
·
问题:利用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的类型会从数组变成对象
解决实例:
推荐阅读:
原文:https://blog.csdn.net/a646070718/article/details/80147075
更多推荐
已为社区贡献2条内容
所有评论(0)