Vue中created和mounted使用场景分析

当我们在使用Vue框架的时候，经常会遇到使用created和mounted两个生命周期钩子函数的情况。这两个函数经常被混淆，它们的使用场景也有所不同。因此，在本文中，我们将详细讲解Vue中created和mounted使用场景分析这个话题。

1. created和mounted的区别

在介绍二者的使用场景之前，我们先来了解一下created和mounted的区别。

• created是组件实例被创建时调用。在这个阶段，模板渲染尚未开始，DOM元素也没有被创建。只有实例才被创建，并在实例化后立即运行的配置的选项（data, methods等）。

• mounted是DOM元素已经在页面上渲染出来后调用。在挂载阶段，Vue实例将模板编译成实际的DOM，并将其渲染在页面上。

综上所述，created是在Vue实例创建后立即调用的生命周期钩子，而mounted是在Vue将模板编译为实际的DOM，并将其渲染出来时调用的生命周期钩子。

2. created的使用场景

对于created，通常用于：

• 初始化某些数据，常见的方式是通过在data中定义。

• 设置某些异步请求或调用，比如利用fetch请求数据。

• 发送事件。

下面是一个关于created的示例：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },

  created() {
    console.log('组件被创建啦！');
  },

  methods: {
    sayHello() {
      console.log('Hello!');
    }
  }
}
</script>

在上面的代码中，我们可以看到，在created函数中，我们仅仅是打印了一条输出语句，用于表明组件已经创建出来。同时，在data中定义了一个message的值，该值在模板中显示。

3. mounted的使用场景

对于mounted，我们通常用于：

• 操作DOM元素，比如获取元素的尺寸、颜色等属性。

• 发送网络请求和接收响应。

• 经常使用第三方库，比如图表、地图等。

下面是一个关于mounted的示例：

<template>
    <div id="mycanvas"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      myChart: {}
    }
  },

  mounted() {
    console.log('图表准备好啦！');
    this.myChart = echarts.init(document.getElementById('mycanvas'));
    this.myChart.setOption({
      series: [{
        data: [30, 40, 20, 50, 70, 80]
      }]
    });
  },
}
</script>

在上面的代码中，我们使用了echarts图表库来绘制一个图表，并将其渲染到页面的mycanvas元素中。mounted函数被调用时，表示页面上的元素已经被渲染出来了，此时我们就有了足够的元素来操作图表库。