VUE系列： 源码分析-逻辑层

Vue 源码分析-逻辑层

预期的效果：

监听input的输入，input在输入的时候，会触发 watch与computed函数，并且会更新原始的input的数值。所以直接跟input相关的处理就有3处，但实际上会有连带性的触发，触发watch的input函数的时候，还会触发this.answer对应的依赖处理

看看内部是如何处理的：

Vue在初始化data的时候，会通过Object.defineProperty重新定义input的set与get访问接口，同时会创建一个记录并且保持其数据对应的依赖watcher对象的Dep对象，这个Dep对象是通过闭包的方式保存在每个独立的data中，而Dep就是用于收集当前data所依赖的Ｗatcher对象

简单来说

• 1.在data中定义了input，那么意味着需要对这个变量进行defineProperty的处理，并创建Dep对象

• 2.watch中的input函数会变成一个Watcher对象，因为它与input有关系，所以需要在data的input的Dep中保存一份引用

• 3.computed中的compiledMarkdown函数会变成一个Watcher对象，，因为它与input有关系，所以需要在data的input的Dep中保存一份引用

• 4.input数据的监控内部创建的Dep的结构，watch与computed明明只有2个对应的Watcher对象，为什么subs会有3个呢？多增加的一个是干什么的？这个多出的Ｗatcher就是vue2中的虚拟dom的处理，后面会提到

这里最终可以简单的梳理下更新的流程：当input数据发生变化的时候，只需要调用响应依赖的Watcher对象，Watcher对象就会负责各自的更新处理。这里面向对象的设计优势就体现出来了，将行为分布在各个对象中，并让这些对象负责自己的行为，所以每个不同Watcher对象更新各自的特点，处理各自的逻辑

更新

更新逻辑：

vue1的 dom更新方式采用队列+直接更新的处理，这种简单粗暴。
vue2在vue1的设计上，继续保留了队列的处理方式，同时结合了时下最流行的 virtual dom

记得在Vue1中，每个Watcher对象都会保存各自的dom节点的处理方式，通过对Watcher的的处理达到直接更新DOM的目的。Vue2因为引入的Virtual Dom的机制，所以Watcher的工作就需要变化了，大多数的Watcher不再直接负责DOM的更新操作，而只是更新数据。这里用了大多数，因为还有一个Watcher是跟Virtual Dom相关的。所以这就是在上文提到的Dep中会多一个Watcher的原因了

Virtual DOM

虚拟DOM的文章现在已经很多了，但是如何紧密结合vue中，到实际的运用是我们分析的重点.

原理：

简单的说直接通过JS操作浏览器API去绘制DOM节点是很慢的，大量的页面处理中，开发者不经意就会调用更多多余或者重复的操作，这种是有性能开销的。那么有什么办法减少这种是误操作呢？就是通过一种方式能算出来最小的更新量，从而提高效率。既然要计算出对小的更新量，那么就会有对比，需要通过对新旧两个节点的对比从而计算出。DOM的操作很慢&#x