vue如何监控数据的变化
vue中的数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
想要做到数据的响应式渲染，vue必须对data中的属性进行监控。那么vue是如何做到这一点的呢，数据通过data传入vue实例之后发生了什么变化呢。
下面代表演示了将数据模型通过data传入Vue之后发生的变化。
<template>
<div>{{value}}</div>
</template>
<script>
const myData = { value: 0 };
console.log('还没有进入vue实例的myData')
console.log(myData);
export default {
data() {
return myData; //返回的是外部创建的myData对象
}
};
setTimeout(() => {
console.log('经过了vue实例之后的myData')
console.log(myData);
}, 2000);
</script>
控制台输出
可以看到对象中多出了value属性的getter和setter方法，说明vue使用Object.definedProperty()定义了value属性。
vue文档深入响应式原理也明确的指出使用了Object.definedProperty来追踪依赖。
vue会使用定义setter对data中每一个属性进行跟踪，在 property 被访问和修改时通知变更。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
data中的bug
vue会将data中所有的存在的属性进行跟踪，如果使用未定义的属性则会直接报错。
var vm = new Vue({
data:{
},
methods:{
foo(){
return this.b //返回一个未定义的变量
}
}
})
如果是复杂的数据类型结果大不相同,也就是对象和数组。
关于对象
下面代码中点击按钮会先创建在obj中创建一个a属性，之后对obj.a不断自增。
<template>
<div>
<button @click="create">点击为obj对象新增a属性</button>
obj.a的值：{{obj.a}} <--显示obj.a的值-->
</div>
</template>
<script>
export default {
data(){
return {
obj:{}
}
},
methods:{
create(){
console.log(this.obj);
if(typeof this.obj.a === 'number'){
this.obj.a++;
}else{
this.obj.a = 0
}
}
}
};
</script>
由于vue只会对data中存在的属性值进行跟踪，所以上面代码中obj.a中的任何变化都不会触发页面的响应式渲染。
可以看到控制台中obj.a确识发生了变化，但是页面却没有渲染。控制台中也看出obj.a属性没有使用definedProperty来定义。
使用$set
可以使用 Vue.set(object, propertyName, value) 或$set(object, propertyName, value)方法向嵌套对象添加响应式 property。例如，对于：
Vue.set(this.obj, 'a', 0)
/**或**/
this.$set(this.obje,'a',0)
上面的代码可以改为
create(){
if(typeof this.obj.a === 'number'){
this.obj.a++;
}else{
this.$set(this.obj, 'a', 0)
}
}
有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
关于数组
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
// vm.$set()
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength) //将newLength之后的值切除
splice是被vue处理过的异变数组
变异数组
vue 在数组上添加了一层原型，对一下这些方法进行重新封装。以便在操作数组之后vue能够跟踪到对应的原型
- push
- pop
- shift
- unshift
- splice
- sort
- reverser
异步更新队列
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)或this.$nextTick(callback),后者不需要全局的Vue构造函数。这样回调函数将在 DOM 更新完成后被调用。
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) // => '已更新'
})
}
}
})
因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
总结
Vue使用Object.definedProperty对所有存在的属性定义getter、setter，以此来对数据的修改进行跟踪,并通知watch对页面进行渲染。
Vue只会对data中存在的数据进行跟踪，后创建的属性需要使用this.$set(propertyName,callback)来进行添加跟踪。
Vue 在更新 DOM 时是异步执行的。如果需要在更新完DOM之后立即进行处理就需要使用this.$nextTick(callback)
