虚拟 DOM 和 DOM diff

虚拟DOM

一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听、子元素,以及其他属性

虚拟DOM的优点

  • 能减少不必要的DOM操作
  • 能跨平台渲染
  • 记住:虚拟DOM和实际DOM的操作,作比较时,要有具体的例子。实际上实际的DOM操作并不慢,但是很多教科书和资料介绍说DOM操作慢,这个说法太片面

虚拟DOM的缺点

需要额外的创建函数,如createElement或h,但是可通过JXS来简化XML写法

DOM diff

  • 虚拟DOM的对比算法
  • 把虚拟DOM想象成树型
  • 举例一
<div :class="x">
    <span v-if="y">{string1}</span>
    <span>{string2}</span>
</div>

在这里插入图片描述

  • 当数据变化,x从red变为green
    在这里插入图片描述

  • 此时DOM diff发现:

    1. div标签类型没变,只需要更新div对应的DOM的属性。
    2. 子元素没变不更新
  • 举例二
    当数据变化,y从true变为false
    在这里插入图片描述
    DOM diff发现:
    div没变,不用更新。
    子元素1标签没变,但是children变了,更新DOM 内容
    子元素2不见了,删除对应的DOM

DOM diff优点

  • 进行同级比较
  • 可以跨平台

DOM diff缺点

  • 同级比较存在bug
  • 解决方案:用Key值进行区分。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页