vue-router - vue 修改代码热更新后会重复渲染同一个组件到页面怎么解决?

Question

vue 开发环境下修改代码，热更新时会添加多个当前的组件怎么解决

简化的demo：github

环境：vue-cli5.0.8 , vue3.3.8 , vue-router4.2.5

父组件代码：

  <transition    enter-active-class="animate__animated animate__slideInLeft"    leave-active-class="animate__animated animate__fadeOutRight"  >    <HelloWorld v-if="show"></HelloWorld>  </transition>

子组件代码（没有什么影响父组件数据的代码，就是一个简单的 demo）

<template>  <div id="random-choice" class="f-c-c">    <textarea      cols="30"      rows="5"      v-model="text"      style="resize: vertical"    ></textarea>    <div class="box f-c">      <div        v-for="(i, index) in textArr"        :key="index"        ref="allStr"        class="str-box"      >        {{ i }}      </div>    </div>  </div></template><script setup>import { computed, ref } from 'vue';const text = ref('');const allStr = ref(null);const textArr = computed(() => {  if (text.value.match(/^\s*$/)) {    return [];  } else {    return text.value.split(/[,，]/).filter((i) => !i.match(/^\s*$/));  }});// 任意代码修改都可复现// console.log(1);</script>

每次组件更改子组件代码时都有可能会在页面多加一个一模一样的 dom 节点（不是每次都会）：

一开始看文档以为是没加 key 的问题，结果加了也不行，包括在 router-view 上加 key 也没作用。怎么才能解决呢

---

补充：

复现：子组件里有 textarea，根据输入内容生成标签的，如果不操作页面只修改代码，会正常销毁之前的 dom，如果在页面文本框里添加了文字，再修改代码就会重复生成一个新的组件，这是我复现多次后的 dom 结构：

我又简化了代码，目前看起来是 transition 部分的问题，不知道是我哪里写的有问题还是什么原因

Answer 1

该问题已解决：该问题是否能够在生产环境产生我无法验证，但是开发环境确实会造成影响。我在子组件中声明了一个模板引用 ref="allStr" | const allStr = ref(null);，不管是否使用该引用都会造成问题的出现，当在组件卸载前重置它 allStr.value = null;，就不会出现问题了。 _但是，为什么会这样我不清楚_。