Vue.js VDOM,三个 part
问题
Vue.js 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 具备了现代框架应有的⾼级特性。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
