虚拟DOM相关知识

虚拟DOM相关知识

以下从以下问题引出虚拟DOM相关知识点
0.究竟什么是虚拟的dom?
1.为什么需要虚拟DOM?
2.虚拟 DOM 的好处？
3.如何用 JS 对象模拟 DOM 树？
4.虚拟 DOM 的优缺点？
5.Vue 中的 key 有什么作用

0. 究竟什么是虚拟的dom?

官方概念：
Vue通过建立一个虚拟的dom树对真实的dom发生的变化保持追踪

一棵真实的dom树的渲染需要先解析css样式和dom树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上面。

而我们所提及的虚拟的dom
则可以理解为保存了一棵dom树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存当中，并通过js的操作来进行维护

1.为什么需要虚拟DOM?

JS 操作真实 DOM 的代价？ 用我们传统的开发模式，原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行10 次。例如，第一次计算完，紧接着下一个 DOM 更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算 DOM 节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作 DOM 的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

2.虚拟 DOM 的好处？

若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性 attch(附加) 到 DOM 树上;用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

3.如何用 JS 对象模拟 DOM 树？

比较两棵虚拟 DOM 树的差异 — diff 算法 (差分:比较文件的差异) 下一个问题：key有什么作用
将两个虚拟 DOM 对象的差异应用到真正的 DOM 树 — patch算法 (修补，打补丁)

4.虚拟 DOM 的优缺点？

保证性能下限；无需手动操作 DOM
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
无法进行极致优化

5.Vue 中的 key 有什么作用

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
深层源码：通过以上分析，给vdom上添加 key属性后，遍历 diff 的过程中，当起始点，结束点的搜寻及 diff 出现还是无法匹配的情况下时，就会用 key 来作为唯一标识，来进行 diff，这样就可以提高 diff 效率。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
简单来讲：
vue中的key作用是高效地更新虚拟的dom,就是管理可复用的元素。当vue.js用v-for遍历已渲染过的元素列表时，它默认用“就地复用的策略”，会复用已有的元素而不是从头开始渲染，这样会使vue变得非常快。