VueJS Transition Group未设置appear仍触发列表组件初始渲染动画问题

这是Vue Transition Group里一个挺容易踩的坑，我来帮你理清楚原因和解决办法：

问题根源 #

Transition Group对自定义组件和原生HTML元素的处理逻辑存在差异：

• 当你使用li这类原生元素时，Transition Group会严格遵循appear属性的配置——默认appear=false，所以初始渲染不会触发动画，符合预期。
• 但换成自定义组件（比如你的CartItem）时，Vue会将其作为动态组件处理，组件的挂载生命周期会让Transition Group误将初始渲染的组件判定为“新插入的元素”，哪怕你没设置appear，也会触发进入动画。

可行的解决方案 #

1. 给自定义组件显式绑定状态并确保key唯一 #

确保你的CartItem组件绑定了唯一且稳定的key（这是Transition Group正常工作的前提），同时给组件加上v-show="true"来明确告知Vue组件的显示状态：

<transition-group name="cart-item">
  <CartItem 
    v-for="item in cartItems" 
    :key="item.id" 
    :item="item"
    v-show="true"
  />
</transition-group>

2. 在子组件内部控制初始渲染状态 #

在CartItem组件内部添加一个状态变量，延迟开启组件的显示，避开Transition Group的初始判定：

<!-- CartItem.vue -->
<template>
  <li v-show="isMounted" class="cart-item">
    <!-- 你的组件内容 -->
  </li>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const isMounted = ref(false);

onMounted(() => {
  // 用微任务延迟，确保Transition Group完成初始渲染判定
  nextTick(() => {
    isMounted.value = true;
  });
});
</script>

3. 显式声明appear=false #

虽然appear默认值就是false，但显式声明有时候能修复组件识别的逻辑偏差，同时确保key正确：

<transition-group name="cart-item" :appear="false">
  <CartItem 
    v-for="item in cartItems" 
    :key="item.id" 
    :item="item"
  />
</transition-group>

额外提示 #

一定要保证每个子元素的key是唯一且不随渲染变化的（比如用商品ID，而不是索引），这是Transition Group正确识别元素增删的核心，很多异常行为都和key设置不当有关。

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