目录
1 什么是虚拟dom
通过描述状态和dom之间的映射关系是怎样的,就可以将状态渲染成视图。
状态可以是js中的任意类型。Object、Array、String、Number、Boolean等都可以作为状态,这些状态最终会以段落、表单、按钮等元素呈现在用户界面上。
将状态作为输入,并生成dom输出到页面上显示出来,这个过程叫做渲染。
当某个状态发生变化时,只更新与这个状态相关联的dom节点。
虚拟dom的解决办法是:通过状态生成一个虚拟节点树,然后使用虚拟节点树进行渲染。在渲染之前,会使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比,只渲染不同的部分。
虚拟节点树其实是由组件树建立起来的整个虚拟节点树(vnode)。
2 为什么要引入虚拟dom
vue2.0开始选择用中等粒度的解决办法,那就是虚拟dom。组件级别是一个Watcher实例,就是说即使一个组件内有10个节点使用了某个状态,但其实也只有一个watcher在观察这个状态的变化。所以当这个状态发生变化时,只能通知到组件,然后组件内部通过虚拟dom去进行对比渲染。
3 vue中的虚拟dom
vue通过编译将模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树,使用这个虚拟节点树就可以渲染页面,如下图所示。
为了避免不必要的dom操作,虚拟dom在虚拟节点映射到视图的过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比,找到真正需要更新的节点来进行dom操作,从而避免操作其它无任何改动的dom。
虚拟dom在vue中主要做了两件事:
1.提供与真实dom节点所对应的虚拟节点vnode;
2.将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图。
虚拟dom最核心的算法是patch。
4 总结
先建立虚拟节点再渲染视图,就可以将虚拟节点缓存,然后使用新创建的虚拟节点和上次渲染时缓存的虚拟节点进行对比,然后根据对比结果只更新需要更新的真实dom节点,从而避免不必要的do操作。
vue2采用中等粒度解决方案,状态更新只侦测组件,组件内部通过虚拟dom来渲染视图,这可以大大缩减依赖数量和watcher数量。
vue中通过模板来描述状态与视图之间的映射管旭,所以它会先模板编译成渲染函数,然后执行渲染函数生成虚拟节点,最后使用虚拟节点更新视图。
注:本文章来自于《深入浅出vue.js》(人民邮电出版社)阅读后的笔记整理