什么是虚拟Dom

虚拟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 之一

virtual-dom
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值