Vue.js 中的 diff 算法是 Vue 的核心之一，它决定了当数据发生变化时，Vue 如何高效地更新 DOM。Vue 使用了一种叫做 "虚拟 DOM" 的技术，它通过比较新旧虚拟 DOM 的差异，来最小化实际对 DOM 的操作，从而提高性能。

diff 算法的工作原理如下：

创建虚拟节点（VNode） ：当组件的 render 函数被调用时，Vue 会为模板中的每一个节点创建一个对应的虚拟节点（VNode）。
对比新旧 VNode：当组件的数据发生变化时，Vue 会创建一个新的 VNode 树，然后与旧的 VNode 树进行对比。
找出差异：通过对比新旧两棵 VNode 树，Vue 可以找出需要更新的部分。这个过程主要包括两个步骤：节点匹配和节点差异比较。
更新 DOM：根据找出的差异，Vue 执行最小化的 DOM 操作，来更新视图。

这种 diff 算法的优势在于，它不需要对整个 DOM 进行重新渲染，而是只更新发生变化的那一部分。这大大提高了应用的性能，尤其是在处理大量数据和复杂视图时。

然而，值得注意的是，虽然 diff 算法在大多数情况下都非常高效，但如果你的模板结构非常复杂或者数据变化非常频繁，可能会导致性能问题。在这种情况下，你可能需要对你的代码进行优化，或者考虑使用其他性能更好的框架。

你知道vue中key的原理吗？说说你对它的理解

#一、Key是什么

开始之前，我们先还原两个实际工作场景

当我们在使用v-for时，需要给单元加上key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Comp :key="+new Date()" />

那么这背后的逻辑是什么，key的作用又是什么？

一句话来讲

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

#场景背后的逻辑

当我们在使用v-for时，需要给单元加上key

如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

#二、设置key与不设置key区别

举个例子：

创建一个实例，2秒后往items数组插入数据

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例
    const app = new Vue({
      el: '#demo',
      data: { items: ['a', 'b', 'c', 'd', 'e'] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, 'f')  // 
       }, 2000);
     },
   });
  </script>
</body>

在不使用key的情况，vue会进行这样的操作：

分析下整体流程：

比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作
比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作
比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作
循环结束，将E插入到DOM中

一共发生了3次更新，1次插入操作

在使用key的情况：vue会进行这样的操作：

比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C，F，不相同类型的节点
- 比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作
循环结束，将F插入到C之前

一共发生了0次更新，1次插入操作

通过上面两个小例子，可见设置key能够大大减少对页面的DOM操作，提高了diff效率

vue diff算法 + key值

你知道vue中key的原理吗？说说你对它的理解

#一、Key是什么

#场景背后的逻辑

#二、设置key与不设置key区别