1.响应式原理
把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性，
Paste_Image.png
所以不能直接添加属性
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive
对于 Vue 实例，可以使用 $set(key, value) 实例方法：
vm.$set('b', 2)// `vm.b` 和 `data.b` 现在是响应的
对于普通数据对象，可以使用全局方法 Vue.set(object, key, value)：
Vue.set(data, 'c', 3)// `vm.c` 和 `data.c` 现在是响应的
有时你想向已有对象上添加一些属性，例如使用 Object.assign()
或 _.extend()
添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：
// 不使用 Object.assign(this.someObject, { a: 1, b: 2 })
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
2.异步更新队列
Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发，只会推入一次到队列中。等到下一次事件循环，Vue 将清空队列，只进行必要的 DOM 更新。在内部异步队列优先使用MutationObserver，如果不支持则使用 setTimeout(fn, 0)。
<div id="example">{{msg}}</div>
var vm = new Vue({
el: '#example',
data: {
msg: '123'
}
})
vm.msg = 'new message' // 修改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
