Vue3组件内其他元素可重渲染，<img>却无法更新的问题求助

你的问题核心是组件复用导致的异步逻辑未重新触发：

• Vue Router在切换同组件路由时（比如从/read/?id=1跳转至/read/?id=2），会复用已挂载的组件实例，不会再次触发onMounted钩子
• CardImage组件仅在首次挂载时执行图片存在性检查，路由切换后imageData更新，但检查逻辑没有重新执行，导致imgUrl始终保留旧值
• 给<img>加key无效，是因为组件实例本身没被销毁重建，key仅能触发DOM元素的重新渲染，无法驱动组件内部的异步检查逻辑

1. 监听content_id变化，重新执行图片检查 #

修改CardImage组件，添加对imageData.content_id的监听，当ID更新时重新触发检查，同时处理请求竞态问题（避免旧请求覆盖新结果）：

<script setup>
import { ref, watch, onUnmounted } from 'vue';

const { imageData } = defineProps({
    imageData: {
        type: Object,
        required: true,
    }
});

const imgUrl = ref('');
let abortController = null; // 用于取消未完成的请求

async function checkIfImageExists(pathID) {
    // 取消之前未完成的请求，避免竞态
    if (abortController) {
        abortController.abort();
    }
    abortController = new AbortController();

    let path = `/img/story/contents/${pathID}.webp`;
    try {
        const response = await fetch(path, { signal: abortController.signal });
        imgUrl.value = response.status === 200 ? path : `/img/story/contents/000000.gif`;
    } catch (error) {
        // 请求被取消时忽略错误
        if (error.name !== 'AbortError') {
            imgUrl.value = `/img/story/contents/000000.gif`;
        }
    }
}

// 监听content_id变化，immediate: true确保初始化时也执行
watch(() => imageData.content_id, async (newId) => {
    await checkIfImageExists(newId);
}, { immediate: true });

// 组件卸载时取消未完成的请求
onUnmounted(() => {
    abortController?.abort();
});
</script>

<template>
    <img :src="imgUrl" :alt="imageData.content_id">
</template>

2. 强制组件销毁重建（备选方案） #

如果不想修改CardImage内部逻辑，可在父组件中给卡片或CardImage组件添加唯一key，强制Vue在路由切换时销毁重建组件：

<!-- 给CardImage加唯一key -->
<CardImage :imageData="cardData" :key="cardData.content_id" />

<!-- 或给RouterLink加唯一key -->
<RouterLink 
    class="card" 
    :to="`/read/?id=${cardData.content_id}&v=${cardData.content_version}`"
    :key="`card-${cardData.content_id}-${cardData.content_version}`"
>
    <CardImage :imageData="cardData" />
    <!-- 其他卡片内容 -->
</RouterLink>

这种方式简单直接，但会丢失组件复用的性能优势，适合卡片数量较少的场景。

3. 优化图片检查逻辑（可选） #

频繁的fetch请求会增加服务器压力，可考虑：

• 前端缓存已检查过的图片ID，避免重复请求
• 后端直接返回图片URL（或默认图URL），前端无需异步检查，减少请求次数

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