Vue异步数据请求的秘密武器：何时调用？

前端

2024-01-18 22:17:01

巧用 Vue 异步数据请求钩子，提升性能和用户体验

前言

在前端开发中，Vue.js 以其优雅的语法和强大的功能备受开发者青睐。而处理异步数据请求时，合理选择调用时机尤为关键，它直接影响着性能优化和用户体验的平衡。

Vue 生命周期中的异步数据请求钩子

Vue 生命周期中提供了三个主要钩子函数，可用于处理异步数据请求：

created： 在创建 Vue 实例时调用，此时 DOM 元素尚未创建，适用于获取无需依赖 DOM 元素的数据，如用户认证信息。
beforeMount： 在创建并挂载 Vue 实例之前调用，此时 DOM 元素已创建但尚未插入父元素，适用于获取需要依赖 DOM 元素创建的数据，如元素的宽高。
mounted： 在创建并挂载 Vue 实例之后调用，此时 DOM 元素已完全创建并插入父元素，适用于获取需要依赖 DOM 元素完全创建的数据，如元素的位置。

如何选择调用时机？

不同的场景需要选择不同的调用时机：

created： 适合获取无需等待 DOM 元素创建的数据，如用户认证信息。
beforeMount： 适合获取需要等待 DOM 元素创建的数据，如元素的宽高。
mounted： 适合获取需要等待 DOM 元素完全创建的数据，如元素的位置。

具体应用示例

获取用户认证信息：

export default {
  created() {
    this.fetchData();
  },
  data() {
    return {
      data: []
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/auth').then((response) => {
        this.data = response.data;
      });
    }
  }
};

获取元素宽高：

export default {
  beforeMount() {
    this.fetchData();
  },
  data() {
    return {
      data: []
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/dimensions').then((response) => {
        this.data = response.data;
      });
    }
  }
};

获取元素位置：

export default {
  mounted() {
    this.fetchData();
  },
  data() {
    return {
      data: []
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/position').then((response) => {
        this.data = response.data;
      });
    }
  }
};