虚拟 DOM 是什么
虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象
虚拟 DOM 的优点
(1)可以减少DOM操作:
例如要添加100个节点,原生DOM操作需要一个个添加,虚拟DOM可以一次添加100个。虚拟DOM可以借助DOM diff 把多余的操作省掉。例如100个节点里,只有10个是有改动的,可以渲染10个改动的节点。没有改动的则不重新渲染。
(2)能跨平台渲染:
因为虚拟DOM本质只是一个JS对象,所以虚拟DOM不仅可以改变DOM,还可以变成小程序,iOS应用,安卓应用等
虚拟 DOM 的缺点
需要额外的创建函数,如 createElement(React) 或 h(Vue),但可以通过 JSX或者vue-loader 来简化成 XML 写法。但是这么做会依赖打包工具。
DOM diff 是什么
新旧虚拟DOM的对比算法。
DOM diff大概的逻辑如下:
Tree diff
将新旧两棵树逐层对比,找出哪些节点需要更新
如果节点是组件就看 Component diff
如果节点是标签就看 Element diff
Component diff
如果节点是组件,就先看组件类型
类型不同直接替换(删除旧的)
类型相同则只更新属性
然后深入组件做 Tree diff(递归)
Element diff
如果节点是原生标签,则看标签名
标签名不同直接替换,相同则只更新属性
然后进入标签后代做 Tree diff(递归)
DOM diff 的优点
可以做到只把变化的部分重新渲染,提高渲染效率的过程。
DOM diff 的问题(key)
同级节点对比存在 bug
解决方法:用唯一Key值进行区分