如何在Nuxt.js组件中同时等待fetch请求完成与子组件挂载后执行操作？

这问题我之前也碰到过！核心就是Nuxt的fetch钩子在客户端的执行时机早于组件挂载，导致你调用$refs.chart的时候组件还没实例化。给你几个靠谱的解决方案：

方案一：监听数据变化 + 挂载后兜底检查 #

通过监听chartData的变化，结合组件挂载状态来触发方法调用，同时在mounted钩子中兜底处理服务端渲染后客户端直接有数据的情况：

<template>
  <div>
    <!--Custom component-->
    <Chart ref="chart"/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      chartData: []
    }
  },
  async fetch() {
    this.chartData = await fetch('https://api.mocki.io/v1/b1e7c87c').then(res => res.json())
  },
  watch: {
    chartData(newData) {
      // 当数据更新且组件已挂载时，调用方法
      if (newData.length > 0 && this.$refs.chart) {
        this.$refs.chart.insertSeries(newData)
      }
    }
  },
  mounted() {
    // 服务端渲染时fetch已完成，客户端挂载后直接执行
    if (this.chartData.length > 0 && this.$refs.chart) {
      this.$refs.chart.insertSeries(this.chartData)
    }
  }
}
</script>

这种方式逻辑清晰，同时覆盖了服务端渲染和客户端导航两种场景，适配性很强。

方案二：双状态标记协调 #

通过两个状态变量分别标记fetch完成和组件挂载完成，当两个条件都满足时执行初始化方法，逻辑更直观：

<template>
  <div>
    <!--Custom component-->
    <Chart ref="chart"/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      chartData: [],
      isFetchDone: false,
      isComponentMounted: false
    }
  },
  async fetch() {
    this.chartData = await fetch('https://api.mocki.io/v1/b1e7c87c').then(res => res.json())
    this.isFetchDone = true
    this.initChart()
  },
  mounted() {
    this.isComponentMounted = true
    this.initChart()
  },
  methods: {
    initChart() {
      // 确保数据、fetch状态、组件挂载三者都就绪
      if (this.isFetchDone && this.isComponentMounted && this.chartData.length) {
        this.$refs.chart.insertSeries(this.chartData)
      }
    }
  }
}
</script>

这种方式扩展性更好，如果后续需要增加其他初始化条件，直接在initChart里补充判断即可。

额外小提示 #

如果你的Chart组件支持通过props接收数据并自动完成初始化，那更推荐直接通过props传递chartData，这样能彻底避免手动调用方法的同步问题，代码也会更简洁。

内容的提问来源于stack exchange，提问作者Felix Eklöf