面试题：Vue生命周期钩子之created与mounted的应用场景区别

created

适合场景：在组件实例创建完成，数据观测和事件配置已完成，但DOM尚未挂载时执行。适用于初始化数据、调用API获取数据等操作，这些操作不依赖于DOM。
举例：比如一个展示用户信息的组件，在组件创建时需要从后端获取用户的基本资料，此时就可以在created钩子函数中调用API来获取数据，因为不需要等待DOM挂载就可以执行数据请求操作。

<template>
  <div>
    <p v-if="user">{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    // 模拟API请求获取用户数据
    setTimeout(() => {
      this.user = { name: '张三' }
    }, 1000)
  }
}
</script>

mounted

适合场景：在组件挂载到DOM后执行。适用于需要操作DOM的场景，例如操作DOM元素添加样式、初始化第三方插件（这些插件依赖于真实DOM存在）等。
举例：当我们需要使用echarts图表库来展示数据时，需要在DOM元素存在后才能初始化图表。

<template>
  <div id="chart" style="width: 400px; height: 300px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    const myChart = echarts.init(this.$el.querySelector('#chart'))
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
    myChart.setOption(option)
  }
}
</script>

星途面试题库

面试题：Vue生命周期钩子之created与mounted的应用场景区别

知识考点

面试题答案

created

mounted