vue中数组变动更新检测

Vue 包含两种观察数组的方法分别如下

 1.变异方法

  顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下

    push()

    pop()

    shift()

    unshift()

    splice()

    sort()

    reverse()

   使用举例:example1.items.push({ message: 'Baz' })

 2.非变异方法

  非变异方法与变异方法的区别就是,非变异方法不会改变原始数组,总是返回一个新数组,

  当使用非变异方法时,可以用新数组替换旧数组,非变异方法大致有:filter()concat() 和 slice()

  使用举例:

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

 1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

 2.当你修改数组的长度时,例如:vm.items.length = newLength

vue针对这两个问题给出了相应的解决办法,使用这两种方法,也会触发状态更新

 1.使用vue全局方法Vue.set() 或者使用vm.$set() 实例方法

 2.使用 splice,caoncat等修改数组

Vue.set用法如下(vm.$set方法是Vue.set的别名,与其用法一致)

  vue中数组变动更新检测

总的来说:vue能不能检测到数组的变化并更新,取决于原生js的数组方法,

     如果原生js方法(vue变异方法)能够修改原数组,那么vue就可以检测到变化并更新(例如push等方法)

     如果原生js方法(vue非变异方法)不能够修改原数组,而是返回一个新数组,那么vue也可以检测到变化并更新,

        前提是使用这些方法时要把新数组返回出来去替换掉旧数组

     至于原生js的数组的两个坑,我们一定到注意,直接利用vue提供的方法来解决

上一篇:Java 开发中如何正确踩坑


下一篇:转:Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log