Vue核心之虚拟DOM以及Diff算法原理

1. 对虚拟DOM的理解？

从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。

2.对于虚拟DOM形成过程的了解

五步：创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

也可以理解为：模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

自己的理解：首先，通过HTML Parser解析HTML，生成一颗DOM节点树，再通过CSS Parser解析CSS，生成CSS的样式规则（Style Rules），再通过DOM节点的attch方法接受样式信息，返回一个Render对象（Render相当于渲染函数），Render对象最终渲染构建成一颗Render树，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标，最后调用节点的Painting方法绘制出来。

3. 为什么要用虚拟DOM 

1.JS操作真实DOM会导致性能下降，频繁操作还会出现页面卡顿等问题，而虚拟DOM运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。（虚拟DOM的本质就是JS跟DOM之间做了一个缓存）

2.跨平台性：Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。

4. DIFF算法的原理

diff算法是发生在虚拟DOM上的，对新虚拟DOM和旧虚拟DOM进行一个精细化比较，实现最小量更新。

• 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
• 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
• 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
• 匹配时，找到相同的子节点，递归比较子节点

1.有key值的diff算法

2.没有key值的diff算法 

5. Vue中key的作用 

vue 中 key 值的作用可以分为两种情况来考虑：

• 第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。
• 第二种情况是 v-for 中使用 key。用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。
• key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可以更准确、更快速
• 更准确：因为带 key 就不是就地复用了，在 sameNode 函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。（sameNode用于判断2个节点是否相同，指向同一个对象）
• 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

6.为什么不建议用index作为key? 

使用index 作为 key和没写基本上没区别，但是不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。