这一节,依然是深入剖析Vue源码系列,上几节内容介绍了
Virtual DOM
是Vue在渲染机制上做的优化,而渲染的核心在于数据变化时,如何高效的更新节点,这就是diff算法。由于源码中关于diff
算法部分流程复杂,直接剖析每个流程不易于理解,所以这一节我们换一个思路,参考源码来手动实现一个简易版的diff
算法。
之前讲到Vue
在渲染机制的优化上,引入了Virtual DOM
的概念,利用Virtual DOM
描述一个真实的DOM
,本质上是在JS
和真实DOM
之间架起了一层缓冲层。当我们通过大量的JS
运算,并将最终结果反应到浏览器进行渲染时,Virtual DOM
可以将多个改动合并成一个批量的操作,从而减少 dom
重排的次数,进而缩短了生成渲染树和绘制节点所花的时间,达到渲染优化的目的。之前的章节,我们简单的介绍了Vue
中Vnode
的概念,以及创建Vnode
到渲染Vnode
再到真实DOM
的过程。如果有忘记流程的,可以参考前面的章节分析。
从render
函数到创建虚拟DOM
,再到渲染真实节点,这一过程是完整的,也是容易理解的。然而引入虚拟DOM
的核心不在这里,而在于当数据发生变化时,如何最优化数据变动到视图更新的过程。这一个过程才是Vnode
更新视图的核心,也就是常说的diff
算法。下面跟着我来实现一个简易版的diff
算法
- 8.1 创建基础类
- 8.2 创建Vnode
- 8.3 模拟渲染过程
- 8.4 diff算法实现
- 8.5 diff算法优化
- 8.6 问题思考