面试题：Vue组件生命周期中created和mounted的区别

Question

在Vue组件化开发里，created和mounted是两个重要的生命周期钩子函数，请阐述它们的主要区别，并且举例说明在实际开发中，哪些场景适合使用created，哪些场景适合使用mounted。

Answer 1

主要区别

1. 执行时机：
   • created：在实例创建完成后立即被调用。此时，组件的数据观测（data observer）和事件机制都已配置完成，但尚未开始挂载，即模板还未被渲染到页面上。
   • mounted：在组件挂载到DOM后被调用。此时，组件的模板已经被渲染成真实的DOM并插入到页面中。
2. 访问DOM情况：
   • created：由于组件还未挂载到DOM，在created钩子函数中无法直接访问到DOM元素。
   • mounted：组件已挂载，此时可以直接操作DOM元素。

适用场景

1. created适用场景：
   • 数据初始化和异步数据获取：
     • 当组件需要在创建后立即初始化一些数据，或者从服务器获取数据时，可以在created中进行。例如，一个展示用户信息的组件，需要在组件创建后就从后端接口获取用户数据来填充组件的数据模型。

     <template>
       <div>
         <p v-if="user">{{user.name}}</p>
       </div>
     </template>
     
     <script>
     export default {
       data() {
         return {
           user: null
         };
       },
       created() {
         // 模拟从后端获取用户数据
         setTimeout(() => {
           this.user = {name: '张三'};
         }, 1000);
       }
     };
     </script>
     

   • 事件绑定（非DOM相关事件）：如果需要绑定一些非DOM相关的事件，如Vuex的mutation事件监听等，可以在created中进行。
2. mounted适用场景：
   • 操作DOM：
     • 当需要对渲染后的DOM进行操作时，比如初始化第三方插件（如echarts图表库），需要基于已渲染的DOM元素来创建图表实例。

     <template>
       <div id="chart"></div>
     </template>
     
     <script>
     import echarts from 'echarts';
     export default {
       mounted() {
         const myChart = echarts.init(this.$el);
         const option = {
           title: {
             text: '示例图表'
           },
           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>
     

   • 依赖于DOM结构的计算：如果某些计算依赖于最终渲染的DOM结构，比如获取元素的尺寸、位置等，就需要在mounted中进行。例如，获取一个元素的宽度来动态调整其他元素的样式。