vue 的 diff 策略
Vue 的 Diff 算法是一种高效的虚拟 DOM 比较方法，它会在更新视图时，通过将新旧虚拟 DOM 树进行差异化比较，从而只对需要更新的部分进行重新渲染。
Vue 的 diff 策略基于以下假设：
- 组件的结构比内容更改频繁。
- 相同类型的元素具有相似的结构。
Vue 的 diff 算法的执行步骤如下：
- 根据新的 VNode 生成一个新的 DOM 节点。
- 如果新节点与旧节点完全相同，则无需更新。如果不同，则执行下一步。
- 如果新节点与旧节点都有子元素，则递归比较子元素。
- 如果新节点有子元素，而旧节点没有，则添加新节点的子元素。
- 如果新节点没有子元素，而旧节点有，则删除旧节点的子元素。
- 如果新节点和旧节点的子元素数量不同，则更新子元素列表。
- 如果新节点和旧节点都是文本节点，则更新文本内容。
Vue 的 diff 算法采用了启发式算法，在比较过程中会给每个节点打上标记，以尽可能复用相同类型的节点。这种优化能够显著提高性能，并减少不必要的 DOM 操作。
react 到 diff 策略
React 的 Diff 算法是一种高效的比较算法，用于在 Virtual DOM 中查找不同之处并仅更新必要的部分。React 的 Diff 算法采用了两个前提假设：
- 两个不同类型的元素将产生出不同的树。
- 开发者可以通过设置 key 属性来暗示哪些子元素在不同的渲染下能保持稳定。
基于这两个假设，React 的 Diff 算法会执行以下操作：
- 如果根节点不同，则删除旧树，并添加新树。
- 如果元素类型不同，则删除旧元素，并添加新元素。
- 如果元素类型相同，则只更新改变的属性。
- 如果子元素不同，则递归地对子元素进行上述操作。
同时，为了优化性能，React 的 Diff 算法还会使用一些启发式策略，例如分层比较和按顺序比较等，以减少需要比较的元素数量。
vue diff 和 react diff 的区别
Vue 和 React 的 diff 算法都是基于虚拟 DOM 树实现的，但具体的实现细节略有不同。
Vue 的 diff 策略是采用双端比较算法，即从新旧节点列表的两端同时开始进行比较，直到两端某个位置重合。这种方式可以最大化地复用已有的节点，提高性能。
React 的 diff 策略是采用单向遍历算法，即从旧节点列表的头部开始遍历，依次在新节点列表中查找相同节点，如果找到了则将旧节点和新节点进行比较，否则就插入新节点。这种方式可以保证遍历每一个节点，且比较过程更加精细，但可能会出现多余的更新操作，影响性能。
总体来说，Vue 的 diff 策略更加简单直接，适合处理数量较少的节点变化；而 React 的 diff 策略则更加精确，适合处理数量较多的节点变化。
vue 的 key 有什么用
在 Vue 中使用key主要用于优化列表渲染的性能。当 Vue 重新渲染一个列表时，它会尝试尽可能地复用已经存在的元素而不是从头开始渲染。
如果没有指定key，Vue 将默认采用“就地复用”策略，即会认为两个相邻的元素是完全相同的，这可能会导致不必要的渲染开销和错误的行为。
指定唯一的key可以帮助 Vue 识别哪些元素需要被更新、重用或删除，从而提高列表渲染的效率和性能。
