vue.js页面加载执行created,mounted的先后顺序说明

在Vue.js中，组件的生命周期包括如下几个阶段：创建（creation）、挂载（mounting）、更新（updating）和销毁（destroying）。其中，created和mounted属于创建和挂载阶段，下面详细介绍它们执行的先后顺序。

首先，created钩子函数会在组件实例创建之后立即被调用，此时模板还未渲染成html，因此无法访问到DOM元素。但是你可以在此时访问组件实例的属性和方法。例如，可以进行异步数据请求或者计算属性的初始化。

接下来，mounted钩子函数会在模板渲染成html之后，挂载到页面上之前被调用，此时可以访问到DOM元素。因此，动态计算元素位置、获取DOM元素尺寸、操作DOM元素等都可以在此时进行。值得注意的是，在此阶段中需要确保调用了异步API的数据已经返回并渲染到页面上。

下面分别给出两个示例说明created和mounted的执行顺序。

示例一：组件中定义created、mounted钩子函数

<template>
  <div>
    <h3>{{message}}</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue.js!'
      };
    },
    created() {
      console.log('执行created钩子函数');
    },
    mounted() {
      console.log('执行mounted钩子函数');
    }
  };
</script>

在这个示例中，我们定义了一个组件，使用了created和mounted两个钩子函数。控制台输出结果如下：

执行created钩子函数
执行mounted钩子函数

可以看出，created先于mounted执行。

示例二：异步API调用数据

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: []
      };
    },
    created() {
      axios.get('/api/list').then(resp => {
        this.list = resp.data;
        console.log('执行created钩子函数');
      });
    },
    mounted() {
      console.log('执行mounted钩子函数');
    }
  };
</script>

在这个示例中，我们在created中使用axios异步请求数据，并在数据请求成功后将返回结果渲染到页面中。控制台输出结果如下：

执行created钩子函数
执行mounted钩子函数

可以看出，异步数据请求调用了created钩子函数，在异步数据请求返回后，页面渲染完成，最后执行了mounted钩子函数。

综上所述，created钩子函数先于mounted钩子函数执行，created适用于数据初始化和异步API请求数据，mounted适用于访问DOM元素和操作DOM元素。