Vue父组件异步取数前子组件已加载导致动态数据不显示如何解决

你遇到的现象本质是v-if="notes.length"的判断条件在异步请求完成前就被触发为true，导致子组件提前实例化，此时传入的prop还未被赋值为有效数据，可按照以下方案依次排查修复：

1 修正v-if判断逻辑，确保判断条件可靠 #

• 确认Vuex中notes对应的state初始值为空数组[]，不要设置为null、undefined或包含空元素的数组，否则notes.length的判断会提前返回真值
• 确认父组件中绑定v-if的notes是从Vuex getter映射的响应式变量，而非本地声明的非响应式变量，保证请求完成后notes的更新能触发v-if的重新判断
• 排查请求流程中是否存在提前给notes赋值非空无效值的逻辑：例如loadPrivate/loadPublic请求中提前给notes赋值了不完整的数据，导致notes.length不为0，提前触发子组件渲染

2 新增独立加载状态控制子组件渲染（更稳妥） #

直接用数据长度判断容易被异常值影响，建议新增单独的加载状态做控制：

• 父组件中声明响应式变量isDataReady，初始值为false
• 等mounted中的所有异步流程（Promise.all并行请求 + 后续串行的checkAttendanceForPreviousTwoWeeks、getCurrentParticipants方法）全部执行完成，且确认notes已经拿到有效值后，再将isDataReady设置为true
• 子组件的渲染条件修改为v-if="isDataReady"

3 子组件侧做兜底兼容 #

即使子组件提前渲染，也避免逻辑报错：

• 给子组件的notesArr prop设置默认值为空数组，示例代码：

props: {
  notesArr: {
    type: Array,
    default: () => []
  }
}

• 子组件中依赖notesArr的逻辑（如你提到的getNotes方法）不要放在created/构造函数中执行，改为监听notesArr的变化，等数据就绪后再触发：

watch: {
  notesArr: {
    immediate: true,
    handler(newVal) {
      // 确认数组有有效值后再执行业务逻辑
      if (newVal.length) {
        this.getNotes(newVal)
      }
    }
  }
}

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