vue的虚拟DOM和diff原理

###vue的虚拟DOM和diff原理

        Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的elm属性可以访问到对应的Node。

vdom因为是纯粹的JS对象,所以操作它会很高效,但是vdom的变更最终会转换成DOM操作,为了实现高效的DOM操作,一套高效的虚拟DOM diff算法显得很有必要。

vdom: 双向绑定虚拟dom。下面是vue的diff算法参考图


一、简单的diff设计:

遍历newVdom的节点,找到他在oldVdom中的位置,找到就移动对应的dom元素,没找到说明是新增节点,则创建一个节点插入。遍历完后如果oldVdom中还有没有处理过的节点,说明这些节点在newVdom中被删除了,删除它们即可。

二、Vue的diff实现:

1、优先处理特殊场景

(1)、头部的同类型节点、尾部的同类型节点

这类节点更新前后位置没有发生变化,所以不用移动它们对应的DOM

(2)、头尾/尾头的同类型节点

这类节点位置很明确,不需要再花心思查找,直接移动DOM就好

处理了这些场景之后,一方面一些不需要做移动的DOM得到快速处理,另一方面待处理节点变少,缩小了后续操作的处理范围,性能也得到提升

2、“原地复用”

“原地复用”是指Vue会尽可能复用DOM,尽可能不发生DOM的移动。Vue在判断更新前后指针是否指向同一个节点,其实不要求它们真实引用同一个DOM节点,实际上它仅判断指向的是否是同类节点

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 褚轩敏:(关于元宵) “东风夜放花千树。更吹落,星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。”这是...
    迷蒙蒙_d777阅读 690评论 0 2
  • 说到写作,除了在学校的作文与这些年来的一些短诗,并没有严格意义上的写作。自从在一本书里读到关于写作——“写作是我们...
    刀火阅读 239评论 2 1
  • 实际上我现在看电影有时候会很纠结,对于好的片子,我觉得我应该去看,但是看完不写点东西,又觉得枉费了这么好的作品。于...
    雀岛札记阅读 396评论 0 0
  • 天湖景区一角 景区导览 嵛山岛快艇时刻表 大鹏展翅 神龟追日 费用情况 住宿:280元/晚(一般180-280这个...
    牧天s阅读 2,467评论 0 50
  • 一边沉重一边欣喜,一旦是晚上就会陷入死水一般的境地。 想起有人会悄悄问了问我,假如情绪沉沦怎么办。大概是两眼疲惫一...
    某木木某阅读 294评论 0 0

友情链接更多精彩内容