Chaoszhu'Blog

Appearance

vdom与diff算法 ​

对虚拟DOM的理解 ​

1、用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中；

2、当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异；

3、把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。 vdom

diff算法O(n) ​

vdom中最核心的一部分。【diff即对比，如git diff】

顾名思义就是通过算法来查找两个树之间的异同点。两个树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。

对比新旧vnode树的三个关键点 ​

1、只比较同一层级，不跨级比较 ​

image

2、tag不同，则直接删除重建 ​

tag

3、tag和key两者都相同，则认为是相同节点，不再深度比较 ​

diff算法关键函数 ​

patchVnode

addVnodes & removeVnodes

updateChildren (key的重要性)

Vue中的虚拟dom借鉴了snabbdom库的实现，然后加入了一些vue的特性 ​

https://juejin.im/post/5d36cc575188257aea108a74#heading-9

vue中的vdom使用VNode这个class类去描述的，使用vm.__patch__方法完成的prevVnode与vnode的diff过程，最后生成新的dom节点完成视图的更新。