vue 数据响应式的理解
是时候谈谈 vue 的数据响应式了，这是 vue 最独特的特性之一。下面我用自己的话，谈谈对 vue 数据响应式的理解。当然更权威的还是要参考深入响应式原理官方权威指南。
vue 的数据响应式是当我们对数据进行操作，数据变化后，会对用到数据地方的视图进行更新。
第一：那首先肯定的是 vue 对这些数据进行了监听，这样数据一变化，vue 就会知道，然后触发视图更新。那么 vue 是怎么实现监听的呢？
Vue 会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。使用 Object.defineProperty 把（选项 data）中（传入的参数对象）的（属性）全部转化为 getter setter。对于选项 data，可以参考上面的介绍以及官方文档。
这里简单介绍一下 Object.defineProperty,getter,setter 的作用原理。下面举例说明：
对象 mydata，有一个属性 age，值为 16，我们可以直接通过 mydata.age = 12,将其属性值进行更改。代码：
let mydata = {age:16};
//对name属性进行修改
mydata.age = 12;//此时mydata的age属性就被更改为12
console.log(mydata.age);console.log(mydata.age);
可是将 mydata 作为参数（并不是直接作为参数），通过执行下面的 proxy 函数之后，
这时我们会发现：无论是通过 mydata.age,还是通过 mydata2.age，都不能对 age 属性进行任意更改。对 age 属性的修改必须符合小于 20 才可以。也就是说在我们对 age 属性进行操作时，会被监听到。（这也就是 Vue 实现数据监听的原理。Vue 会递归的将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。并且创建的 Vue 实例也代理了 data 对象上所有的属性）
第二：同时 Vue 会对每个组件实例设置一个 watcher 实例。这个 watcher 实例负责监听在渲染过程中接触到的数据属性。当数据属性变化的时候，也就是 seter 的时候，watcher 实例监听到，然后使相关联的组件重新渲染。
第三：上面就是 Vue 数据响应式的基本原理，但这里有几个地方需要注意。
检测变化的注意事项：Vue 无法检测到对象属性的添加或删除；Vue 不能检测以下数组的变动》当直接利用索引直接设置一个数组项时或修改数组的长度时。
1》Vue 无法检测到对象属性的添加或删除：Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。如下面例子所示 vm.b。
var vm = new Vue({
data:{
a:1,
obj:{name:'gg',age:18}
}
})
// `vm.a` `vm.obj`是响应式的
vm.b = 2
// `vm.b` 是非响应式的
但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性,如 Vue.set(vm.someObject, 'b', 2)。具体还拿上面的例子，可以给 obj 增加一个响应式属性 hobby，还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2);//这两种都可以
//具体举例
Vue.set(vm.obj, 'hobby', "running");
this.$set(this.obj, 'hobby', "running");
有时可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`，
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
2》Vue 不能检测以下数组的变动：当直接利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 或修改数组的长度时，例如：vm.items.length = newLength。举个例子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
// 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)。
声明响应式属性：Vue 不允许动态添加根级响应式属性，所以必须要在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。
var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。
异步更新队列：Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
