当数据改变时，VUE是如何实现DOM更新的？

这是我本身写的一个demo，message是响应式的，当其改变的时候就会触发DOM更新，我经过一个点击事件来模拟数据改变，而后探究一下，咱们的DOM是如何更新的？

dep.notify

咱们的data对象已经经过Object.defineProperty实现了setter, 那么当咱们的message改变的时候，代码会马上执行到这里

那么就会到Dep实例的notify方法，而后在这个方法中会循环一个subs的数组，这个数组是实例的一个属性，数组里存的是咱们的Watcher，所谓Watcher就是data 对象的属性在被访问的时候，会给每个属性维护一个Watcher实例。 从数组中遍历而后执行单个Watcher的update方法。而后在update方法中执行queueWatcher。这个函数中会维护一个异步更新队列。而后去执行nextTick(flushSchedulerQueue)方法，

flushSchedulerQueue方法中又会去执行Watcher的run方法。

而后在run方法中执行watcher的get方法。这个get方法很重要。

里面记录了一个很是重要的参数getter, 这个参数实际上就是vm.update(vm.render()), 而后执行getter。

update

在执行getter的过程，也就是vue的 render、 update的过程，也是生成vnode，转化为真实DOM的过程。update执行完了之后，咱们的DOM也就更新了。

最后

这个过程是本身在经过浏览器打断点的方式一步一步的调试出来的，虽然以前也看过网上不少关于vue的源码解析，但大多都是隔靴搔痒，并无对本身造成一个深入的理解。因此，我想经过这种方式来加深本身对vue的一种理解。各位路过的大神们请多多指点！