vue3组件加载顺序踩坑记录

最近在开发vue3的时候，父子组件加载顺序有问题

 

问题复现：计划单号需要生成，调用后端接口，刚开始是在子组件暴露出来的方法让父组件去调用

defineExpose({ setFormState, initTemplateOptions })

 整个表单是使用的子组件进行封装，子组件在变化的时候发射事件让父组件更新

子组件：
watch(
  () => formState.value,
  (now) => {_emit('formStateChangeHandle', now)},
  { deep: true }
)

const formState: Ref<formStateType> = ref({
    planCode:'' //计划单号
})

父组件:

const formStateChangeHandle = (state: any) => {
  /**
   * 监听formState改变
   */
  formState.value = state
}

有时候由于网络请求太快，导致网络请求先回来，给表单赋值，但是watch后执行，就会导致子组件再把初始值的计划单号传给父组件，此时又会把空的值传过去，导致页面刚开始加载出来了计划单号，闪一下就没有了，初步排查是网络加载太快的原因。

解决方法：在调用接口的时候加个延迟函数

nextTick(async () => {
  await init() // 请求字典集合
  setTimeout(() => {
    createPlanCode() // 生成包装条码
  })
})

补充：

vue2组件加载顺序：

父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”

父组件监听子组件加载：

<Child @hook:mounted="doSomething" ></Child>

vue3监听子组件加载：

<OutBoundBaseForm  @vnode-mounted="doSomething" />

const doSomething= () => {
  /**
   * @method 监听子组件加载
   */
    console.log('子组件加载了')
}