Vue - data

参考：深入响应式原理、data、数组更新检测

var vm = new Vue({
  el: '#app',
  data: {
    name: 'jn',
    items: [1, 2, 3],
    person: {
      firstName: 'chan'
    }
  }
})

1.Vue是一个响应式框架，只有在data中提前声明的变量，才能在视图中响应。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。

2.为什么组件的data是一个函数？如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。每个组件都会各自独立维护它的数据，因为你每用一次组件，就会有一个它的新实例被创建。

3.由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

解决方法

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

// 你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)

// 为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)

4.还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

添加一个新的 age 属性到嵌套的 person对象：

Vue.set(vm.userProfile, 'age', 23)

// 还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 23)

一次性添加多个新的响应式属性

vm.person= Object.assign({}, vm.person, {
  age: 23,
  job: 'it'
})