咨询Vue 3 VNode对比算法改进的相关官方文档

下面是两个简单的Vue组件示例：

SmallButton.vue #

<template>
  <div>
    <button @click="count++"> {{ count }} </button>
  </div>
</template>

<script>
export default {
  name: 'SmallButton',
  data: () => ({ count: 0 }),
};
</script>

ParentComponent.vue #

<template>
  <div>
    <button @click="isShow = !isShow"> Change button </button>

    <div v-if="isShow">
      <SmallButton />
    </div>
    <div v-else>
      <SmallButton />
    </div>
  </div>
</template>

<script>
import SmallButton from './SmallButton.vue';

export default {
  name: 'ParentComponent',
  components: { SmallButton },
  data: () => ({ isShow: true }),
};
</script>

在Vue 2中点击「Change button」按钮时，会出现DOM不更新的问题，给<SmallButton>添加:key属性即可解决；但Vue 3中不存在这个问题。推测这是Vue 2与Vue 3的新旧VDOM树对比方式差异导致的，以下是可以查阅该改进相关内容的渠道：

• Vue 3官方迁移指南：迁移指南中专门设有章节对比Vue 2与Vue 3的核心差异，其中关于VDOM对比逻辑、组件复用判断规则的调整有明确说明，尤其是涉及key属性作用场景变化的部分。
• Vue 3核心源码仓库：在Vue的GitHub仓库中，负责VDOM渲染对比的模块（如runtime-core/src/renderer.ts）的提交记录、PR或Issue里，能找到优化组件复用判断逻辑的具体改动细节，相关内容会说明调整的原因以及解决的Vue 2遗留问题。
• Vue官方团队技术内容：Vue核心团队成员发布的技术博客、在技术大会上的演讲，常会深入讲解Vue 3在VDOM、渲染机制上的优化细节，这类内容往往会提及针对组件复用场景的改进。

内容的提问来源于stack exchange，提问作者Dmitriy Zhuravlev