面试中的网红Vue源码解析之虚拟DOM，你知多少呢？深入解读diff算法

前言

众所周知，在前端的面试中，面试官非常爱考dom和diff算法。比如，可能会出现在以下场景

滴滴滴，面试官发来一个面试邀请。接受邀请📞

🙎‍♂️面试官：你知道 key 的作用吗？
🙋‍♀️我：key 的作用是保证数据的唯一性。
🙎‍♂️面试官：怎么保证数据的唯一性？
🙋‍♀️我：就…
🙎‍♂️面试官：你知道虚拟dom吗？
🙋‍♀️我：虚拟dom就是……balabala
🙎‍♂️面试官：（好像有点道理）那你知道diff算法吗？
🙋‍♀️我：（心里：what……diff算法是什么？？）
🙎‍♂️面试官：本次面试结束，回去等面试结果通知。

我们都知道， key 的作用在前端的面试是一道很普遍的题目，但是呢，很多时候我们都只浮于知识的表面，而没有去深挖其原理所在，这个时候我们的竞争力就在这被拉下了。所以呢，深入学习原理对于提升自身的核心竞争力是一个必不可少的过程。

在接下来的这篇文章中，我们将讲解面试中很爱考的虚拟DOM以及其背后的diff算法。请认真阅读本文～文末有学习资源免费共享！！！

1、什么是虚拟DOM

虚拟DOM是用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。本质上是JS 和 DOM 之间的一个映射缓存。

要点：虚拟 DOM 是 JS 对象；虚拟 DOM 是对真实 DOM 的描述。

diff发生在虚拟DOM上。diff算法是在新虚拟DOM和老虚拟DOM进行diff（精细化比对），实现最小量更新，最后反映到真正的DOM上。

• 最小量更新。key是vnode节点的唯一标识，告诉了diff算法，更改前后他们是同一个节点。
• 只有是同一个虚拟节点，才进行精细化比较，否则就暴力删除旧的、插入新的。
• 只进行同层比较，不会进行跨层比较。

2、h函数

我们前面知道diff算法发生在虚拟DOM上，而虚拟DOM是如何实现的呢？实际上虚拟DOM是有一个个虚拟节点组成。

h函数用来产生虚拟节点（vnode）。虚拟节点有如下的属性：
1）sel： 标签类型，例如 p、div；
2）data： 标签上的数据，例如 style、class、data-*；
3）children ：子节点；
4） text： 文本内容；
5）elm：虚拟节点绑定