面试题：Vue中在哪个生命周期钩子适合进行异步数据加载及原因

在Vue项目里，通常会在created或mounted生命周期钩子函数中进行异步数据加载操作。

选择created钩子函数的原因：

created钩子函数在实例创建完成后立即调用，此时组件的data和methods都已初始化完成，但DOM还未挂载。如果异步数据加载操作不依赖于DOM，那么在created中进行数据加载可以尽早开始，提前获取数据，提高用户体验。

选择mounted钩子函数的原因：

mounted钩子函数在组件挂载到DOM后调用。如果异步数据加载操作依赖于DOM（例如，需要获取DOM元素的尺寸后再请求特定的数据），那么就应该在mounted中进行。

示例：在created钩子函数中从API获取用户信息 假设使用axios库进行HTTP请求，代码如下：

<template>
  <div>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Email: {{ user.email }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        const response = await axios.get('https://example.com/api/user');
        this.user = response.data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    }
  }
};
</script>

示例：在mounted钩子函数中从API获取用户信息

<template>
  <div ref="userInfoContainer">
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Email: {{ user.email }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null
    };
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        // 这里可以先获取DOM相关信息，比如容器的宽度
        const containerWidth = this.$refs.userInfoContainer.offsetWidth;
        // 根据宽度请求不同的数据
        const response = await axios.get(`https://example.com/api/user?width=${containerWidth}`);
        this.user = response.data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    }
  }
};
</script>

星途面试题库

面试题：Vue中在哪个生命周期钩子适合进行异步数据加载及原因

知识考点

面试题答案