Vue响应式原理
如何追踪变化
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，每一个属性都有一个自己对应的Dep订阅器。
在对’#app’里面的子元素进行编译时，会对每一个需要获取key的位置创建一个订阅者watcher
(1)构造时将这个watcher赋值给Dep.newSub，然后读取key，触发get(),在get函数中触发当前key对应的订阅器dep的addSub事件,将这个watcher加入到key的订阅者数组中------订阅key
(2)每次key改变，就会触发set，从而触发dep的notify事件，通知该key的订阅者数组subs所有成员更新最新数据并把新值通过回调函数传回，更新视图，达到追踪变化的效果------发布消息
检测变化的注意事项
受现代 JavaScript 的限制，Vue 无法检测到对象属性的添加或删除。由于 Vue 只在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
声明响应式属性
由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值
/* 监听器 */
class Observer {
constructor(data) {
this.observer(data);
}
/* 遍历data设置监听 */
observer(obj) {
if (obj && typeof obj == 'object') {
/* 获取obj所有子属性 */
let keys = Object.keys(obj);
/* 遍历子属性，全部设置监听 */
keys.forEach(key => {
this.defineRactive(obj, key, obj[key]);
})
}
}
/* 监听 */
defineRactive(obj, key, val) {
/* 若子对象则继续遍历 */
this.observer(val);
/* 给每个值设置一个订阅器 */
let dep = new Dep();
/* 监听改变函数 */
Object.defineProperty(obj, key, {
get() {
/* 判断是否有新订阅者 */
Dep.newSub && dep.addSub();
return val;
},
set: (newVal) => {
/* 相等则没必要更新 */
if (val !== newVal) {
/* 更新val已有的属性的数据，对新加的属性进行监听 */
if (typeof val == 'object') {/* 对象或数组 */
/* 更新内部内容 */
this.updateObj(val, newVal);
} else {
val = newVal;
}
/* 发布 */
dep.notify();
}
}
})
}
/* 对象更新设置子数据更新 */
updateObj(obj1, obj2) {
if (obj1 instanceof Object || obj1 instanceof Array) {
for (let key in obj1) {
if (obj1[key] instanceof Object || obj1[key] instanceof Array) {
this.updateObj(obj1[key], obj2[key]);
} else {
obj1[key] = obj2[key];
}
}
} else {
obj1 = obj2;
}
}
}
/* 订阅器 */
class Dep {
constructor() {
/* 初始化订阅者数组 */
this.subs = [];
}
/* 增加订阅者 */
addSub() {this.subs.push(Dep.newSub);}
/* 发布 */
notify() {
/* 通知所有订阅者更新数据 */
this.subs.forEach(sub => {
sub.update();
})
}
}
/* 订阅者 */
class Watcher {
constructor(vm, prop, cb) {
this.vm = vm;
this.prop = prop;
this.cb = cb;
/* 加入订阅者数组 */
this.join();
}
/* 加入订阅者数组 */
join() {
/* 将自己设置为订阅器的新订阅者 */
Dep.newSub = this;
/* 读取一次数据触发get,从而间接触发addSub */
this.oldVal = CompileUtil.getVal(this.vm, this.prop);
/* 重置，否则会重复添加 */
Dep.newSub = null;
}
/* 更新 */
update() {
/* 对比新旧值决定是否更新 */
let newVal = CompileUtil.getVal(this.vm, this.prop);
if (this.oldVal !== newVal) {
this.oldVal = newVal;
/* 运行回调函数 */
this.cb(newVal);
}
}
}
异步更新队列
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 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) // => '已更新'
})
}
}
})
