Vue.js子组件beforeMount/Mounted阶段无法获取父组件异步传递props问题

本质是异步请求和Vue生命周期的时序冲突：
axios发起的是异步网络请求，父组件mounted钩子仅负责触发请求，请求返回并修改kpi_kalite的时间，远晚于子组件beforeMount、mounted的执行时间。此时子组件读取到的是父组件kpi_kalite的初始值，如果父组件没有将该值初始化为空数组，就会返回undefined。

方案1：用侦听器监听prop变化（推荐，适配所有异步场景） #

在子组件内添加watch监听kpi_kalite的变化，值更新后自动触发业务逻辑，添加immediate属性兼容初始有值的场景：

// 子组件代码
props: {
  kpi_kalite: {
    type: Array,
    default: () => [] // 给prop加默认值兜底，避免初始为undefined
  }
},
watch: {
  kpi_kalite: {
    immediate: true,
    handler(newVal) {
      // 空值跳过执行
      if (!newVal || newVal.length === 0) return
      this.set_input(newVal)
    }
  }
},
methods : {
  set_input(data){
    console.log(data)
    for(const i in data){
      console.log(i)
      console.log(data)
    }
  }
}

方案2：请求完成后再渲染子组件（满足页面加载前获取数据的需求） #

如果要求页面HTML、CSS加载完成前就处理完数据，可在父组件内控制子组件的渲染时机，拿到接口数据后再渲染子组件，此时子组件所有生命周期钩子都能直接拿到完整prop值：

<!-- 父组件模板，替换为你的子组件标签名 -->
<child-component v-if="kpi_kalite.length > 0" :kpi_kalite="kpi_kalite" />

父组件要注意初始化kpi_kalite为空数组：

// 父组件data
data() {
  return {
    kpi_kalite: []
  }
}

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