面试题：Vue父子组件异步操作下生命周期钩子的协同处理

父子组件生命周期钩子函数协同工作：
- 父组件：
  - 在 created 钩子函数中发起异步请求获取数据。例如：

export default {
  data() {
    return {
      parentData: null
    };
  },
  created() {
    this.$axios.get('/api/data')
    .then(response => {
        this.parentData = response.data;
      })
    .catch(error => {
        console.error('父组件异步请求错误', error);
      });
  }
};

子组件：
- 使用 props 接收父组件传递的数据。
- 在 created 钩子函数中，由于此时 props 已被初始化，可以访问到父组件传递的数据，但此时子组件自己的异步初始化操作不建议在此处进行，因为此时数据可能还未从父组件完全获取并传递过来。
- 在 mounted 钩子函数中进行子组件自身的异步初始化操作。例如：

export default {
  props: ['parentData'],
  mounted() {
    if (this.parentData) {
      this.$axios.post('/api/sub - data', { data: this.parentData })
      .then(response => {
          // 子组件异步操作成功处理
        })
      .catch(error => {
          console.error('子组件异步请求错误', error);
        });
    }
  }
};

处理异步操作中的错误：
- 父组件：
  - 在异步请求的 catch 块中处理错误，如上述代码中通过 console.error 记录错误信息。也可以设置一个错误状态变量，在模板中根据该变量显示错误提示信息。例如：

export default {
  data() {
    return {
      parentData: null,
      requestError: null
    };
  },
  created() {
    this.$axios.get('/api/data')
    .then(response => {
        this.parentData = response.data;
      })
    .catch(error => {
        this.requestError = '获取数据失败，请稍后重试';
        console.error('父组件异步请求错误', error);
      });
  }
};

在模板中：

<template>
  <div>
    <div v - if="requestError">{{ requestError }}</div>
    <child - component v - if="!requestError" :parentData="parentData"></child - component>
  </div>
</template>

子组件：
- 同样在自身异步请求的 catch 块中处理错误，记录错误信息并可以设置自己的错误状态变量，用于在模板中显示相应的错误提示。例如：

export default {
  props: ['parentData'],
  data() {
    return {
      subRequestError: null
    };
  },
  mounted() {
    if (this.parentData) {
      this.$axios.post('/api/sub - data', { data: this.parentData })
      .then(response => {
          // 子组件异步操作成功处理
        })
      .catch(error => {
          this.subRequestError = '子组件初始化数据失败';
          console.error('子组件异步请求错误', error);
        });
    }
  }
};

在模板中：

<template>
  <div>
    <div v - if="subRequestError">{{ subRequestError }}</div>
    <!-- 子组件正常渲染内容 -->
  </div>
</template>

通过上述方式，可以确保父子组件在异步数据传递和渲染过程中的正确协同工作，并处理可能出现的错误，保证组件的健壮性。

星途面试题库

面试题：Vue父子组件异步操作下生命周期钩子的协同处理

知识考点

面试题答案