Vue Virtual Dom 和 Diff原理

vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念:

用js来模拟DOM中的节点。传说中的虚拟DOM。

Vue Virtual Dom 和 Diff原理
是不是一下子秒懂 没懂再来一张
Vue Virtual Dom 和 Diff原理
Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念:

diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。

换句话来说

diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁

Vue Virtual Dom 和 Diff原理

多说无益,再来一张图
Vue Virtual Dom 和 Diff原理
这个Diff的过程不展开说了,有兴趣的童鞋可以走起,如果还没懂,再走起