vue中修改了数据但视图无法更新的情况

我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况:

数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以

  • Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: 
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
    • vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
    • filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
  • Vue 不能检测以下变动的数组: 
    • ① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
    • ② 当你修改数组的长度时,例如: vm.items.length = newLength

猜你喜欢

转载自blog.csdn.net/sanstu/article/details/79423602