vue2.0 引入了虚拟 DOM, 比 Vue1.0 的初始渲染速度提升了 2~4 倍, 并大大降低了内存消耗.
虚拟 DOM 的提出
在早期的时候, 页面的交互比较简单, 没有复杂的状态需要管理, 更不需要频繁的操作 DOM; 但随着页面的功能越来越多, 客户的需求越来越复杂, DOM 的操作也越来越频繁. 而每当操作 DOM 的时候, 会引起页面的回流以及重绘, 增加浏览器的消耗, 降低了页面的渲染速度, 从而降低了浏览器的性能. 虚拟 DOM 的应用可以减少对 DOM 元素的操作, 从而提升浏览器的性能.
模板转换成视图的过程
vue.js 通过编译将模板转换成渲染函数 (render), 执行渲染函数就可以得到一个虚拟 DOM
在对模型进行操作的时候, 会触发对应的 Dep 中的 Watcher 对象. Watcher 对象会调用对应的 update 来修改视图. 这个过程主要是将新旧 DOM 进行差异对比, 然后根据结果进行对比.
总之, Vue 将模板编译成虚拟 DOM 渲染函数. 结合 Vue 自带的响应系统, 在状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.
转换过程
针对上图补充说明几个概念
渲染函数: 渲染函数是用来生成虚拟 DOM 的.
vnode 虚拟节点: 它可以代表一个真实的 DOM 节点, 通过 createElement 方法能够将 vnode 渲染成 DOM 节点. 简单地说, 虚拟节点可以理解成节点描述对象, 它描述了应该怎样去创建真实的 DOM 节点.
patch(也称为 patching 算法): 虚拟 DOM 最核心的部分, 它可以将 vnode 渲染成为真实的 DOM, 这个过程是对比新旧虚拟节点之间有哪些不同, 然后根据对比结果找出需要更新的节点进行更新. 而 patch 本身就有补丁, 修补的意思, 其实际作用是在现有 DOM 上进行修改来实现更新视图的目的.
来源: http://www.jianshu.com/p/bd386ff642dd