vue 会监视data中所有层次的数据

如何监测对象的数据？

通过setter实现监视，且要在new Vue 时就传入要监测的数据。

• 对象中后追加的属性，Vue默认不做响应式处理（视图跟随数据变化而变化）
• 如需给后添加的属性做响应式（视图跟随数据变化而变化），请使用如下API：
  1. Vue.set(target, propertyName/index.value)
  2. vm.$set(target, propertyName/index.value)其中vm是vue实例中的this

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

• 调用原生对应的方法对数组进行更新。
• 重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用的方法

变更方法

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

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

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

使用Vue.set进行设置

• Vue.set(target, propertyName/index.value)
• vm.$set(target, propertyName/index.value)其中vm是vue实例中的this

特别注意：使用Vue.set()对象不能是 Vue 实例，或者 Vue 实例的根数据对象。