vue或者uniapp修改数据后页面不重新渲染

最新推荐文章于 2024-05-11 00:19:13 发布

Dread_lxy

最新推荐文章于 2024-05-11 00:19:13 发布

阅读量1.4k

点赞数 9

文章标签： vue.js uni-app 前端

本文链接：https://blog.csdn.net/weixin_47586598/article/details/136339563

版权

本文介绍了在Vue应用中，如何通过`this.items`对象的深拷贝和`$set`方法处理数据变更，确保当数组或对象结构改变时，页面能及时渲染。重点讲解了使用`JSON.parse(JSON.stringify())`复制对象和`this.$set(arr,index,obj)`更新数组元素的应用实例。

摘要由CSDN通过智能技术生成

1.数据是对象

通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染

this.items=JSON.parse(JSON.stringify(this.items));

2.数据是数组

this.$set 方法，可以显式地告诉Vue，某个属性的值已经发生了变化，从而触发视图的更新

let arr = [
    {name:'lxy',age:16},
    {name:'zzf',age:13},
    {name:'zp',age:17}
]
const obj = {name:'aaa',age:11},

//arr是修改的数组  index是修改的索引  obj是修改的数据

this.$set(arr,1,obj)

//打印结果
[
    {name:'lxy',age:16},
    {name:'aaa',age:11},
    {name:'zp',age:17}
]