Vue数据更新视图不更新，有哪些解决方案可以一劳永逸？

本文共计893个文字，预计阅读时间需要4分钟。

目录 + Vue数据更新视图不更新的几种解决方法 + 知识拓展 + 对象属性的添加或删除 + 异步更新队列 + Object.assign方法 + Vue多层循环 + Vue更新了数据但视图没有更新 + Vue数据更新视图不更新的几种解决方法

目录

• Vue数据更新视图不更新的几种解决
• 知识拓展
• 对象属性的添加或删除
• 异步更新队列
• Object.assign方法
• vue多层循环
• Vue更改了数据但是视图却没有更新

Vue数据更新视图不更新的几种解决

知识拓展

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。

数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测

push()，pop()，splice()，sort()，reverse()可被vue检测到 filter(), concat(), slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。