今天发现了一个奇怪的现象，在 transtion-group 组件使用ref([])数据遍历无法触发动画效果。代码如下：
<template>
<transtion-group name="flip-list" tag="div">
<div v-for="(item,index) in list" :key="item.id">
<span @click="up()">上移</span>
<span @click="down()">下移</span>
<span>{{item.name}}</span>
</div>
</transtion-group>
</template>
<script setup>
import {ref} from "vue";
const list = ref([]);
// 数组上移操作
function up(){}
// 数组下移操作
function down(){}
</script>
个人推测原因是没办法监听到ref产生的value的变化，固将ref改为reactive，经测试可正常触发动画。示例：
<template>
<transtion-group name="flip-list" tag="div">
<div v-for="(item,index) in list" :key="item.id">
<span @click="up()">上移</span>
<span @click="down()">下移</span>
<span>{{item.name}}</span>
</div>
</transtion-group>
</template>
<script setup>
import {reactive} from "vue";
const list = reactive([]);
// 数组上移操作
function up(){}
// 数组下移操作
function down(){}
</script>
