Nuxt 3如何在API响应成功后重新渲染组件？

方案一：利用Vue响应式自动触发重渲染（推荐） #

Vue 3（Nuxt 3基于Vue 3）的组件渲染由响应式状态驱动，只要确保传递给AssetsTab的props是响应式的，且API成功后正确更新这些状态，组件就会自动重新渲染。

1. 确保formData是响应式对象
   在<script setup>中用reactive或ref定义formData：

   import { reactive, ref, onMounted } from 'vue'
   
   const formData = reactive({ assets: {} })
   const loader = ref(false)
   

2. 在getDetails()中更新响应式状态
   API调用成功后直接更新formData.assets，Vue会自动检测状态变化并触发AssetsTab重渲染：

   async function getDetails() {
     loader.value = true
     try {
       // 替换为你的实际API调用逻辑
       const response = await fetch('/api/your-target-endpoint')
       const data = await response.json()
       // 更新响应式数据
       formData.assets = data.assets
     } catch (error) {
       console.error('API调用失败:', error)
     } finally {
       loader.value = false
     }
   }
   
   onMounted(async () => {
     await getDetails()
   })
   

方案二：通过key属性强制重渲染（兜底方案） #

如果组件内部存在非响应式状态，或响应式更新无法触发重渲染，可以通过修改组件的key属性，强制Vue重新创建组件实例（即触发重渲染）。

1. 给AssetsTab添加key属性

   <template>
     <AssetsTab
       :form-data="formData.assets"
       :loader="loader"
       @on-submit="submitForm"
       :key="componentKey"
     />
   </template>
   

2. 定义并更新componentKey

   import { ref, reactive, onMounted } from 'vue'
   
   const componentKey = ref(0)
   const formData = reactive({ assets: {} })
   const loader = ref(false)
   
   async function getDetails() {
     loader.value = true
     try {
       const response = await fetch('/api/your-target-endpoint')
       const data = await response.json()
       formData.assets = data.assets
       // 更新key值，触发组件重渲染
       componentKey.value += 1
     } catch (error) {
       console.error('API调用失败:', error)
     } finally {
       loader.value = false
     }
   }
   
   onMounted(async () => {
     await getDetails()
   })
   

注意事项 #

• 优先使用方案一，响应式更新是Vue原生机制，性能更优且符合框架设计理念。
• 方案二仅用于特殊场景，比如组件依赖外部非响应式资源、或内部状态无法通过响应式更新同步时。

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