Vue.js同类型组件无法正常切换的问题排查与解决

问题成因 #

Vue 出于性能优化的考虑，会复用相同组件类型的实例。你模板里的两个 <comment-form> 属于同一个组件类，当你在编辑表单和回复表单之间切换时，Vue 并没有销毁之前打开的那个表单实例，而是尝试复用它。这就导致原本应该被 v-if 条件隐藏的表单实例没有被正确移除，最终出现两个表单同时显示的异常情况。

简单来说：Vue 把这两个 <comment-form> 当成了同一个“可复用”的组件实例，而非两个独立的个体，所以切换时没有执行销毁旧实例的操作。

修复方案 #

给每个 <comment-form> 添加唯一的 key 属性，让 Vue 能够明确区分这两个不同的实例，这样当 v-if 条件变化时，Vue 就会正确地销毁旧实例、创建新实例，而不是复用。

修改模板中的表单代码如下：

<comment-form 
  :model="model" 
  :model-id="modelId" 
  :comment="comment" 
  v-if="showEditForm && canComment" 
  @closeForm="closeForm"
  :key="`edit-form-${comment.id}`"
></comment-form>
<comment-form 
  :model="model" 
  :model-id="modelId" 
  :parent-id="comment.id" 
  :reply-to="comment" 
  v-if="showReplyForm && canComment" 
  @closeForm="closeForm"
  :key="`reply-form-${comment.id}`"
></comment-form>

额外说明 #

你的切换逻辑（reply、editComment、closeForm 方法）本身是正确的，已经在切换时互斥地设置了 showEditForm 和 showReplyForm 的值。添加 key 后，Vue 就能正确识别这是两个独立的组件实例，从而严格按照 v-if 的条件控制显示与隐藏。

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