问题：如代码所示，我们在多次更新data属性，会不会触发多次dom diff计算和渲染，在更新data属性到dom渲染过程发生了什么事？

<template><div><div>{{title}}</div><div @click="refresh">更新</div></div>
</template><script>export default {data() {return {title: ''};},methods: {refresh() {this.title = '测试数据1';this.title = '测试数据2';this.title = '测试数据3';this.title = '测试数据4';this.title = '测试数据5';this.title = '测试数据6';}}};
</script>

一、了解Observer、Dep、Watcher

1、vue组件初始化

vue组件初始化的时候会执行_init函数，从而做了一些初始化处理，在处理不同阶段中调用不同的vue生命周期函数，例：breforeCreate、created等

Vue.prototype._init = function (options) {var vm = this;initEvents(vm);// 将render函数转化为vnodeinitRender(vm);// 调用beforeCreate生命周期函数callHook(vm, 'beforeCreate');initInjections(vm);// 初始化处理props、methods、data、computed、watchinitState(vm);initProvide(vm);// 调用created生命周期函数callHook(vm, 'created');....// 挂载组件到DOM树if (vm.$options.el) {vm.$mount(vm.$options.el);}
}

2、Observer

initState → initData → observe → new Observer(data) → Observer.walk(data) → defineReactive$$1(data, key) → Object.defineProperty(data, key, {get, set})
通过调用链可以发现在initData开始，由Observer开始对data每个key值进行set、get的拦截监听(利用Object.defineProperty)，同时可以发现在defineReactive$$1中对每个key值的拦截监听都会创建一个Dep对象，在get的时候调用dep.depend()，在set的时候调用dep.notify()

function defineReactive$$1 (obj,key,val,customSetter,shallow
) {var dep = new Dep();// 对data的key进行set、get拦截Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {dep.depend();},set: function reactiveSetter (newVal) {dep.notify();}}
}

3、Dep

Dep对象主要将watcher对象维护在自己的属性中，同时也将自己加入到watcher中，在notify时候会调用watcher的update方法

var Dep = function Dep () {this.id = uid++;this.subs = [];
};// 将watcher加入到dep的subs数组中
Dep.prototype.addSub = function addSub (sub) {this.subs.push(sub);
};Dep.prototype.removeSub = function removeSub (sub) {remove(this.subs, sub);
};// 将dep加入到watcher的deps数组中、同时
Dep.prototype.depend = function depend () {if (Dep.target) {Dep.target.addDep(this);}
};// 遍历dep中watcher、调用他们update方法
Dep.prototype.notify = function notify () {var subs = this.subs.slice();for (var i = 0, l = subs.length; i < l; i++) {subs[i].update();}
};

4、Watcher

vm.$mount → mountComponent → new Watcher(vm, updateComponent)
由调用链在创建Watcher对象后，会将自己压入栈顶，等待触发data 属性getter时候，将dep和watcher对象互相绑定

// 挂载组件
function mountComponent (vm,el,hydrating
) {updateComponent = function () {// vm.render()执行render函数生成新节点vm._update(vm._render(), hydrating);};// 创建Watcher对象new Watcher(vm, updateComponent, noop, {before: function before () {if (vm._isMounted && !vm._isDestroyed) {callHook(vm, 'beforeUpdate');}}}, true);
}/************* Watcher函数 **********************/
var Watcher = function Watcher (vm,expOrFn,cb,options,isRenderWatcher
) {// 存储的dep数组this.deps = [];// 存储的dep idthis.depIds = new _Set();// 存储调用者传过来的updateComponentthis.expression = expOrFn.toString();if (typeof expOrFn === 'function') {this.getter = expOrFn;}this.value = this.lazy ? undefined : this.get();
}// watcher的get方法
Watcher.prototype.get = function get () {// 将当前watcher压栈pushTarget(this);value = this.getter.call(vm, vm);// 将当前watcher出栈popTarget();
}// 添加dep到Watcher对象属性中
Watcher.prototype.addDep = function addDep (dep) {var id = dep.id;if (!this.newDepIds.has(id)) {this.newDepIds.add(id);this.newDeps.push(dep);if (!this.depIds.has(id)) {// 将watcher对象添加到dep对象中dep.addSub(this);}}
};// Watcher对象update方法
Watcher.prototype.update = function update () {/* istanbul ignore else */if (this.lazy) {// 懒加载this.dirty = true;} else if (this.sync) {// 同步组件this.run();} else {// watcher队列queueWatcher(this);}
};// Watcher对象run方法
Watcher.prototype.run = function run () {if (this.active) {var value = this.get();if (value !== this.value ||// Deep watchers and watchers on Object/Arrays should fire even// when the value is the same, because the value may// have mutated.isObject(value) ||this.deep) {// set new valuevar oldValue = this.value;this.value = value;if (this.user) {try {this.cb.call(this.vm, value, oldValue);} catch (e) {handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));}} else {this.cb.call(this.vm, value, oldValue);}}}
};

二、vue组件中数据更新会发生什么事情？

由于上面我们同步了一些关键信息，通过断点结合，可以看到整个调用过程
1、数据更新，我们首先会触发Data的set拦截，同时调用dep的notify方法。
2、遍历dep对象中的watcher数组，执行watcher的update方法。
3、在watcher的update函数中调用queueWatcher方法，并将自己作为入参。
4、在queueWatcher函数中，判断has map是否有当前watcher id，没有则将watcher存入queue队列，记录watcher id到has map中，调用nextTick方法；有则跳过这一步，等待异步刷新队列执行(异步刷新队列：flushSchedulerQueue)。
5、在nextTick中，将flushSchedulerQueue push进callbacks数组，执行timerFunc方法。
6、timerFunc中等待浏览器的微任务/宏任务回调时候遍历执行callbacks数组中的异步刷新队列方法flushSchedulerQueue。
7、在flushSchedulerQueue中，调用watcher的run方法。
8、在watcher的run中，调用watcher的get方法。
9、在watcher的get中，调用watcher的getter属性方法。
10、在Watcher对象初始化时候，getter就是mountComponent时候传入updateComponent方法。
11、执行updateComponent方法，会调用组件_update方法，传入当前组件_render函数返回值。
12、在_render函数中，获取当前组件data中的值(当前最新的值)。
13、在_update中，调用patch方法，传入新旧Vnode。
14、在patch中，调用patchVnode方法，开始diff比较虚拟dom树。

堆栈调用.png