vue created钩子函数与mounted钩子函数的用法区别

Vue是一种流行的JavaScript框架，提供了很多生命周期钩子函数给开发者，其中包括了created和mounted钩子函数。这两个钩子函数都会在组件被创建之后执行，但是它们有着不同的作用和使用场景。

created钩子函数

• 作用：created钩子函数是在Vue实例被创建之后，完成了数据观测（data observer）和事件处理（event watcher）之后被调用的。
• 使用场景：如果你需要在实例被创建之后进行一些初始化的操作，就可以在created钩子函数中完成。例如，获取异步数据、执行vuex操作等。

下面是一个Vue组件示例，在created钩子函数中发送HTTP请求，获取异步数据：

<script>
  export default {
    created() {
      this.$http.get('/api/data').then((response) => {
        this.dataList = response.data;
      });
    },
    data() {
      return {
        dataList: []
      };
    }
  };
</script>

mounted钩子函数

• 作用：mounted钩子函数是在Vue实例挂载到DOM元素之后被调用的。另外，挂载不等于渲染完毕，因为组件可能还有子组件，在挂载到DOM之后，子组件可能还没有挂载完毕。
• 使用场景：如果你需要在挂载到DOM之后，对DOM进行操作或者初始化一些插件、第三方库（如各种图表库、地图库等等）的时候，就可以在这个钩子函数中完成。

下面是一个示例：

<script>
  export default {
    mounted() {
      this.$refs.wrapper.style.backgroundColor = 'yellow';
    }
  };
</script>

<template>
  <div ref="wrapper">
    <!-- content -->
  </div>
</template>

在mounted钩子函数中，我们可以通过this.$refs来获取组件中的DOM元素，然后对其进行操作，例如这里是为wrapper元素添加了一个背景颜色。

综上所述，created和mounted钩子函数都是在Vue组件被创建后执行的，但是它们的执行时机不同，适用的场景也有所不同。如果你需要初始化一些数据，获取异步数据等操作，就可以在created钩子函数中完成；如果你需要对DOM进行操作，初始化一些插件或者第三方库，就可以在mounted钩子函数中完成。