Vue3中computed结合reverse()处理ref数组出现显示异常问题

你遇到的问题核心在于响应式数组的处理不当，具体有两个关键点：

1. 直接引用了非响应式的props数组：你用ref(props.conversation.messages)创建的引用，指向的是父组件传递的原始数组。如果这个原始数组不是响应式的（比如父组件只是传递了普通数组，而非ref/reactive包装的数组），那么你对数组执行push操作后，Vue的响应式系统无法检测到数组内容的变化，导致filteredMessages这个计算属性不会重新计算。

2. reverse()结合slice()的特性：当你使用slice().reverse()时，每次计算属性的getter都会返回一个新的数组实例。如果响应式系统没有检测到原数组的变更，计算属性就会一直返回初始状态的反转数组（只有Something），但你在开发者工具里看到的是原数组已经被修改（包含Test 1），所以出现了显示不一致的情况。而当你去掉reverse()时，模板可能直接绑定了原数组的引用，在某些情况下能触发脏检查更新，所以能显示正确值。

1. 创建响应式的数组副本 #

不要直接引用props传递的数组，而是创建一个独立的响应式副本，避免修改props同时确保响应式生效：

const props = defineProps(['conversation'])
// 用展开运算符复制原数组，创建响应式副本
const messages = ref([...props.conversation.messages])

2. 正确调用数组方法（访问ref的value属性） #

在脚本中操作ref包装的数组时，必须通过.value访问数组本身：

onMounted(() => {
    messages.value.push({
        body: 'Test 1'
    })
})

3. 优化列表渲染的key绑定 #

如果模板中用v-for渲染消息列表，务必绑定唯一的key（不要用索引），避免Vue的diff算法复用DOM元素导致显示异常：

<template>
  <div v-for="msg in filteredMessages" :key="msg.id">
    {{ msg.body }}
  </div>
</template>

经过以上修改，messages数组的变更会被响应式系统正确检测，filteredMessages会重新计算并返回正确的反转数组，页面显示就能和开发者工具保持一致了。

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