Vue中数据变更后视图未更新，如何排查解决？

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

在Vue中，我们常遇到明明修改了数据，但视图无法更新。这种情况通常发生在以下场景：[b]1. 使用v-for遍历的数组，当数组内容使用arr[0].xx +=xx更新数据时，Vue无法监测到这种变化。[/b]

我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况： [b]1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到[/b] [quote]数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以[/quote] Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： [list] [*]push() [*]pop() [*]shift() [*]unshift() [*]splice() [*]sort() [*]reverse() [*]vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue) [*]filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。