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