- 手动操作
DOM
比较麻烦,还需要考虑浏览器兼容性问题,虽然有jQuery
等库简化DOM
操作,但是随着项目的复杂 DOM 操作复杂提升 - 为了简化
DOM
的复杂操作于是出现了各种MVVM
框架,MVVM
框架解决了视图和状态的同步问题 - 为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,于是
Virtual DOM
出现了 Virtual DOM
的好处是当状态改变时不需要立即更新 DOM,只需要创建一个虚拟树来描述DOM
,Virtual DOM
内部将弄清楚如何有效(diff
)的更新DOM
- 虚拟
DOM
可以维护程序的状态,跟踪上一次的状态 - 通过比较前后两次状态的差异更新真实
DOM
虚拟 DOM 的作用
- 维护视图和状态的关系
- 复杂视图情况下提升渲染性能
- 除了渲染
DOM
以外,还可以实现SSR(Nuxt.js/Next.js)
、原生应用(Weex/React Native
)、小程序(mpvue/uni-app
)等
2. VDOM:三个 part
- 虚拟节点类,将真实
DOM
节点用js
对象的形式进行展示,并提供render
方法,将虚拟节点渲染成真实DOM
- 节点
diff
比较:对虚拟节点进行js
层面的计算,并将不同的操作都记录到patch
对象 re-render
:解析patch
对象,进行re-render
补充1��VDOM 的必要性?
- 创建真实DOM的代价高:真实的
DOM
节点node
实现的属性很多,而vnode
仅仅实现一些必要的属性,相比起来,创建一个vnode
的成本比较低。 - 触发多次浏览器重绘及回流:使用
vnode
,相当于加了一个缓冲,让一次数据变动所带来的所有node
变化,先在vnode
中进行修改,然后diff
之后对所有产生差异的节点集中一次对DOM tree
进行修改,以减少浏览器的重绘及回流。
补充2:vue 为什么采用 vdom?
引入
Virtual DOM
在性能方面的考量仅仅是一方面。
- 性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及
Virtual DOM
哪个的性能更好还真不是一个容易下定论的问题。 Vue
之所以引入了Virtual DOM
,更重要的原因是为了解耦HTML
依赖,这带来两个非常重要的好处是:
- 不再依赖
HTML
解析器进行模版解析,可以进行更多的AOT
工作提高运行时效率:通过模版AOT
编译,Vue
的运行时体积可以进一步压缩,运行时效率可以进一步提升;- 可以渲染到
DOM
以外的平台,实现SSR
、同构渲染这些高级特性,Weex
等框架应用的就是这一特性。
综上,
Virtual DOM
在性能上的收益并不是最主要的,更重要的是它使得Vue
具备了现代框架应有的高级特性。