如何判断数据是否受Vue管理，数据（对象，数组，字符串等）能否响应式更新？

  • 即查看数据是否有对应get/set方法，数组没有对应get/set方法，故操作数组要通过其封装好的变更方法

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push() – 向数组的末尾添加一个或多个元素，并返回新的长度。
  • pop() – 删除并返回数组的最后一个元素。
  • shift() – 把数组的第一个元素从其中删除，并返回第一个元素的值。
  • unshift() – 向数组的开头添加一个或更多元素，并返回新的长度。
  • splice() – 向 / 从数组中添加 / 删除项目，然后返回被删除的项目。
  • sort() – 对数组的元素进行排序。
  • reverse() – 反转数组中元素的顺序。

非变更方法，替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如

  • filter() -创建一个新的数组，过滤指定元素
  • concat() – 连接两个或多个数组。
  • slice() – 从已有的数组中返回选定的元素。

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

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

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

其他

  • split() – 把一个字符串分割成字符串数组（返回一个数组）。

新增新属性

  • Vue.set( target, propertyName/index, value )
  • vm.$set( target, propertyName/index, value )
    注意：两者不能给vm（vm实例）或vm的跟数据对象（vm._data） 添加属性