Nuxt3/Vue3：属性变更时如何动态切换渲染的组件？

核心方案：给ChatWindow添加唯一key属性 #

Vue会依据组件的key值判断是否复用组件实例，当key变化时，会销毁旧组件并创建全新实例。你只需给ChatWindow绑定与conversationId关联的key即可实现需求：

<template>
    <div v-if="conversationId">
        <h1>Current conversation: {{ conversationId }}</h1>
        <ChatWindow :conversationId="conversationId" :key="conversationId"/>
    </div>
</template>

<script setup>
    const conversationId = useState('conversationId');
    
    const showConversation = (convId) => {
        conversationId.value = convId;
    }
</script>

原理说明 #

• Vue的虚拟DOM diff算法会对比组件的key值，当key改变时，会判定这是一个全新组件，进而销毁旧实例、创建新实例，新实例会自动接收更新后的conversationId属性。
• 若未设置key，Vue会尝试复用现有组件实例，这会导致组件内部状态不会重置，初始化逻辑也不会重新执行。

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