Vue实例中生命周期created和mounted的区别详解

当我们在Vue中创建一个实例时，它会先到生命周期中的created函数，然后再到mounted函数。这两个生命周期函数对于我们开发Vue应用程序非常重要，因为它们可以帮助我们在特定的时间点注入特定的代码。

1. created生命周期函数

created生命周期函数是在Vue实例中最早执行的函数，它在实例被创建之后立即调用。在这个时候，Vue实例上的属性和方法都已经创建好了，但是还没有被挂载到DOM上。

在created函数中，我们可以进行一些初始化的工作，比如初始化数据、调用方法等等。另外，在created函数中，我们可以通过this来获取Vue实例对象。在以下示例中，我们可以看到如何在created函数中初始化数据和调用方法。

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

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  created() {
    this.initMessage();
  },
  methods: {
    initMessage() {
      this.message = "Hello, World!";
    },
  },
};
</script>

在上面的示例中，我们通过Vue实例的created函数来初始化数据，并通过一个方法来设置message的值。

2. mounted生命周期函数

mounted生命周期函数是在Vue实例挂载到DOM上之后才执行的函数。在这个时候，Vue实例上的属性和方法已经挂载到DOM上了，我们可以通过DOM来操作这些属性和方法了。

在mounted函数中，我们可以进行一些操作DOM的工作，比如获取DOM元素、调用第三方库等等。另外，在mounted函数中，我们同样可以通过this来获取Vue实例对象。

在以下示例中，我们可以看到如何在mounted函数中获取DOM元素，并调用第三方库来进行操作。

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    $(this.$refs.input).focus();
  },
};
</script>

在上面的示例中，我们通过mounted函数获取了input元素的DOM对象，并使用第三方库jQuery来使这个元素获得焦点。