Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗;
vue中模板转换成视图的大致过程是:vue.js 通过编译将 template 模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟的节点;然后在对 model 进行操作的时候,会触发 Dep 中的 Watcher 对象; watcher 对象会调用相应的 update 来修改视图,这个过程主要是将新旧虚拟节点进行差异对比,然后根据对比进行 DOM 操作来更新视图;在这个过程中主要涉及了几个概念:渲染函数、VNOde虚拟节点、patch(patching算法);
渲染函数:主要是用来生成 virtual DOM 的;vue 虽然推荐使用 template 来构建页面,但是其实也是支持直接写渲染函数的;
VNode虚拟节点:它是节点描述,可以代表一个真实的dom,最终真实的dom就是通过createElement将VNode渲染成真实的dom的;
patch(也叫patching算法):它是虚拟dom最核心的部分,VNode最终就是经过这个算法成为真实的dom的,这个过程是对比新旧节点之间的不同,然后根据对比结果找出需要更新的节点进行更新;
Virtual DOM 简单的说就是一颗树,一颗以javaScript对象(VNode)作为基础的树,用对象的属性来描述节点,因此这个对象至少包含标签名(tag)、属性(attrs)、和 子元素对象(chuildren)
Virtual DOM 的最终目的是将虚拟的节点渲染到视图上,其实它主要做了两件事:(1)、提供与真实DOM节点对应的虚拟节点VNode;(2)、将虚拟节点VNode和旧虚拟节点(oldVNode)进行对比,然后更新视图;
Virtual DOM 的优势:
(1)、具备跨平台的优势;
(2)、操作DOM慢,js运行的效率高;vue 将DOM对比放在js层,提高效率,Virtual DOM 本质上其实就是js 和 dom 之间的一个缓存,通过 patching 算法计算出真正需要更新的节点,最大限度的减少DOM操作;
(3)、提升渲染的性能;dom操作的减少,可以避免更多的回流和重绘等,更加高效的提高性能