Vue源码的全方位解读(二)

    如今的声明式操作DOM都是描述状态和DOM之间的映射关系是怎样的，就可以将状态渲染成视图，现代框架揭露的事实是，我们的关注点应该聚焦在状态维护上，而DOM操作时可以省略掉的，状态可以是js中的任意类型，最终会以段落、表单、链接或按钮等元素呈现在用户界面上。当某个状态发生变化时，只更新与这个状态相关联的DOM节点。虚拟DOM的解决方式就是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点树和上一次生辰的虚拟节点树进行对比，只渲染不同的部分。

    Vue.js的变化侦测和React,Angular都不一样，它在一定程度上知道具体哪些状态发生了变化，这样就可以通过更细粒度的绑定来更新视图，也就是说，在Vue.js中，当状态发生变化时，它在一定程度上知道哪些节点使用了这个这状态，从而直接对这些节点进行更新操作，但粒度太细，太多的watcher观察状态就会造成很大的内存开销。vue2.0开始引入虚拟DOM，组件级别是一个watcher实例，也就是说即使一个组件内有10个节点使用了某个状态，但其实也有只有一个watcher在观察这个状态的变化。当这个状态发生变化时，只能通知到组件，然后组件内部通过虚拟DOM去进行比对和渲染。

    在vue.js中，使用模板来描述状态与DOM之间的映射关系，Vue.js通过编译将模板转换为渲染函数(render),执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。为了避免不必要的操作，虚拟DOM在将节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他无任何改动的DOM.虚拟DOM做的事就是：1.提供与真实DOM节点相对应的虚拟节点vnode.2.将虚拟节点vnode和旧虚拟节点oldvnode进行比对然后更新视图。模板编译的主要目标就是生成渲染函数，而渲染函数的作用是每次执行它，它就会使用当前最新的状态生成一份新的vnode，然后使用这个vnode进行渲染。

    在Vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同的vnode实例各自表示不同类型的DOM元素。vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点，vnode表示一个真实的DOM元素，所有真实的DOM节点都使用vnode创建并插入到页面中。由于每次渲染视图时都是先创建vnode,然后使用它创建真实DOM插入到页面中，所以可以将上一次渲染视图的vnode缓存起来，之后每当需要重新渲染时，将新创建的vnode和上一次缓存的vnode进行对比，查看它们之间有哪些不一样的地方，找出这些不一样的地方并基于此去修改真实的DOM.Vue采用了中等粒度的状态侦听策略，也就是当状态发生变化时，只通知到组件级别，然后组件内使用虚拟DOM来渲染视图，当某个状态发生变化时，只通知使用了这个状态的组件，也就是只要组件使用的众多状态中有一个发生了变化，那么整个组件使用状态的节点就要重新渲染。

    vnode的类型有以下几种：注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。

    patch算法：虚拟DOM最核心的部分就是patch算法。通过这种找新旧vnode不同的方式选择性的更新DOM,之所以这么做是因为DOM的执行速度远远不如js的运算速度，因为把大量DOM操作搬到js中通过patch算法来计算出真正需要更新的节点，最大限度的减少DOM操作，从而显著提升技能。用js的运算成本来换DOM操作的执行成本。（直接操作DOM也可以完成操作，但这一切都是为了性能考虑）

    整个patch过程包括：创建新增的节点、删除已经废弃的节点、修改需要更新的节点。整个patch流程并不复杂，当oldVnode不存在时，直接使用vnode渲染视图，当oldVnode和Vnode都存在但并不是同一个节点时，使用Vnode创建的DOM元素替换旧的DOM元素，当oldVnode和vnode是同一个节点时，使用更详细的对比操作对真实的DOM节点进行更新。

    将模板编译成渲染函数可以分为两个步骤，先将模板解析成AST(抽象语法树),然后再使用AST生成渲染函数。但是由于静态节点不需要总是重新渲染，所以在生成AST之后、生成渲染函数之前这个阶段，需要做一个操作，就是遍历一遍AST,给所有的静态节点做一个标记，这样在虚拟DOM中更新节点时，如果发现节点有这个标记，就不会重新渲染它。