虚拟Dom
什么是虚拟Dom
Virtual DOM(虚拟DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual DOM.
虚拟Dom的表达方式
{
sel: "div",
data: {},
children: undefined,
text: "Hello Virtual DOM",
elm: undefined,
key: undefined
}
为什么使用虚拟Dom
1.
手动操作 DOM
比较麻烦,还需要考虑浏览器兼容性问题,虽然有jQuery
等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升2.为了简化 DOM 的复杂操作于是出现了各种
MVVM 框架
,MVVM 框架解决了视图和状态的同步问题3.为了简化视图的操作我们可以使用
模板引擎
,但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM
出现了4.Virtual DOM 的好处是当状态改变时不需要立即更新 DOM,只需要创建一个虚拟树来描述DOM, Virtual DOM 内部将弄清楚如何
有效(diff)的更新 DOM
5.虚拟 DOM 可以维护程序的状态,跟踪上一次的状态 通过
比较
前后两次状态的差异
更新真实 DOM
虚拟Dom的作用
1.维护
视图
和状态
的关系2.复杂视图情况下
提升渲染性能
3.除了渲染 DOM 以外,还可以实现
SSR
(Nuxt.js/Next.js)、原生应用
(Weex/React Native)、小程序
(mpvue/uni-app)等
Vue 2.x改造了那个虚拟DOM库
Snabbdom
1.Vue 2.x 内部使用的 Virtual DOM 就是改造的
Snabbdom
, 大约 200行代码2.通过模块
可扩展
3.源码使用
TypeScript
开发
最快的 Virtual DOM 之一