虚拟DOM,DOM diff ,Vue.nextTick()
2021-05-11 本文已影响0人
RickyWu585
虚拟DOM是什么
- 一个能代表 dom 树的对象,通常含有
标签名、标签上的属性、事件监听和子元素们以及其他属性
虚拟DOM优点
- 减少DOM操作
1.虚拟DOM可以将多次操作合并为一次操作,比如添加1000个节点,不用虚拟DOM会操作1000次
2.虚拟DOM借助DOM diff可以吧多余的操作省掉,比如添加1000个节点,只有10个是新增的 - 跨平台
虚拟DOM缺点
- 需要额外的创建函数,如 createElement 和 h,但可以通过 JSX 来简化为 XML 写法
创建虚拟Dom
- Vue:通过h函数创建。Vue template语法,通过 vue-loader 转换为 h 形式
- React:通过 babel 转换为 createElement 形式
什么是DOM diff
- 就是一个函数,我们称之为 patch
- 递归对比前后dom树的区别
- patches = patch(oldVNode,newVNode)
- patches 就是要运行的 dom 操作(增删改之类的dom操作)
- 先不做,把要更新的dom操作 放到一个任务队列里,等全部统计结束了一次性更新
- 这也是vue中有时需要使用
$nextTick
的原因