Vue数据更新了但是视图不更新

原文链接：《Vue数据更新了但是视图不更新》

最近在发生了一件很奇怪的事，明明Vue中data的数据已经更新了，但是页面渲染出来的内容并没有跟随着更新，包括使用elemeUI的时候也有这种情况！难道是数据双向绑定出问题了？

经过我东查查西找找，终于是找到了原因和解决方法，为了避免以后找不到，那就在这里记录一下吧！

可能出现的原因

通过集成各家所讲，本人简单罗列了可能是以下原因导致的，当然，每个人遇到的情况不一样，甚至还会遇到更加邪门的事情，还需要根据自己的实际情况去排查。

1. 数据响应性问题

Vue无法检测到对象属性的添加或删除。例如，如果添加了一个新的属性到已经存在的对象上，Vue将不会触发视图更新。

利用索引直接设置一个项时，例如 vm.items[indexOfItem] = newValue。

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

• push()、pop()、splice()、sort()、reverse()可被vue检测到。
• filter()、concat()、slice() 这些不会改变原始数组，但总是返回一个新数组。

2. 异步更新队列

Vue在更新DOM时是异步执行的。当数据变化时，Vue不会立即更新DOM，而是等到下一次事件循环再执行更新。如果需要立即更新视图，可以使用 Vue.nextTick(callback) 方法。

3. 使用v-if条件渲染

如果元素是通过 v-if 条件渲染的，并且条件在初始渲染时是 false ，当条件变为 true 时，元素可能不会立即出现。确保条件逻辑正确。

4. 缓存问题

如果使用了某些缓存机制，如 keep-alive ，那就得看看是不是有处理了组件的激活和停用状态。

开始排查

首先在控制台中打印出最后更新的数据，