Vue3中defineAsyncComponent挂载完成时不触发onUpdated的问题

核心问题原因 #

直接引入组件时，父组件的onUpdated触发时子组件已同步渲染完成；但用defineAsyncComponent时，组件加载是异步过程，父组件更新完成时异步组件可能还未完成渲染，因此拿不到目标DOM元素。

实用解决方案 #

方法一：子组件通知父组件加载完成 #

给每个异步组件添加挂载完成的事件通知，父组件收集所有组件的状态，全部完成后执行DOM操作：

<script setup>
import { ref, watch } from 'vue'
const Accordion = defineAsyncComponent(() => import('./Accordion.vue'))

// 根据实际手风琴数量初始化加载状态数组
const componentLoaded = ref(new Array(3).fill(false))

// 监听所有组件是否加载完成
watch(
  () => componentLoaded.value.every(loaded => loaded),
  (allLoaded) => {
    if (allLoaded) {
      const buttons = document.querySelectorAll('.accordion-button')
      // 这里处理DOM逻辑
      console.log(buttons)
    }
  },
  { immediate: true }
)
</script>

<template>
  <Accordion
    v-for="(item, index) in 3"
    :key="index"
    @loaded="componentLoaded[index] = true"
  />
</template>

子组件Accordion.vue中只需在挂载时触发事件：

<script setup>
const emit = defineEmits(['loaded'])
onMounted(() => emit('loaded'))
</script>

方法二：用自定义指令追踪组件挂载 #

通过自定义指令监听每个异步组件的根元素挂载，计数达标后执行DOM操作：

<script setup>
import { ref, directive } from 'vue'
const Accordion = defineAsyncComponent(() => import('./Accordion.vue'))

const mountedCount = ref(0)
const totalComponents = 3 // 手风琴总数

// 自定义指令：追踪组件挂载
const vTrackMount = directive('track-mount', {
  mounted() {
    mountedCount.value++
    if (mountedCount.value === totalComponents) {
      const buttons = document.querySelectorAll('.accordion-button')
      // 处理DOM逻辑
      console.log(buttons)
    }
  }
})
</script>

<template>
  <Accordion
    v-for="(item, index) in 3"
    :key="index"
    v-track-mount
  />
</template>

方法三：Promise.all + nextTick（固定组件数量场景） #

收集所有异步组件的加载Promise，等待全部加载完成后，再通过nextTick等待DOM渲染：

<script setup>
import { nextTick } from 'vue'

// 收集所有异步组件的加载Promise
const componentPromises = [
  import('./Accordion.vue'),
  import('./Accordion.vue'),
  import('./Accordion.vue')
]

Promise.all(componentPromises).then(() => {
  nextTick(() => {
    const buttons = document.querySelectorAll('.accordion-button')
    // 处理DOM逻辑
    console.log(buttons)
  })
})

// 定义异步组件
const Accordion = defineAsyncComponent(() => import('./Accordion.vue'))
</script>

<template>
  <Accordion v-for="(item, index) in 3" :key="index" />
</template>

方法四：MutationObserver监听DOM变化（动态数量场景） #

如果手风琴数量不固定，用MutationObserver监听父容器的DOM变化，当目标元素全部出现时执行操作：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const Accordion = defineAsyncComponent(() => import('./Accordion.vue'))
const targetCount = ref(3) // 预期的手风琴按钮数量
let observer = null

onMounted(() => {
  observer = new MutationObserver(() => {
    const buttons = document.querySelectorAll('.accordion-button')
    if (buttons.length === targetCount.value) {
      // 处理DOM逻辑
      console.log(buttons)
      observer.disconnect()
    }
  })

  // 监听父容器的DOM变化（替换成你的手风琴父容器选择器）
  observer.observe(document.querySelector('#accordion-container'), {
    childList: true,
    subtree: true
  })
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<template>
  <div id="accordion-container">
    <Accordion v-for="(item, index) in 3" :key="index" />
  </div>
</template>

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