面试题：Vue 实例在挂载过程中发生了什么？

Vue 实例的挂载过程是指 Vue 实例从创建到将其模板渲染到 DOM 中的整个过程。在这个过程中，Vue 会经历一系列的生命周期钩子函数，并完成模板编译、数据绑定、DOM 渲染等操作。以下是 Vue 实例在挂载过程中的详细步骤：

一、挂载过程的主要步骤

1. 初始化阶段

触发钩子：beforeCreate
- Vue 实例初始化，但数据观测（data observer）、事件/侦听器配置等还未完成。
- 此时无法访问 data、methods、computed 等。
触发钩子：created
- 实例创建完成，数据观测、事件/侦听器配置已完成。
- 可以访问 data、methods、computed 等，但 DOM 还未生成。

2. 模板编译阶段

Vue 会检查是否有 template 或 el 选项：
- 如果有 template，则将其编译为渲染函数。
- 如果没有 template，则将 el 指定的外部 HTML 作为模板编译。
编译完成后，生成渲染函数（render function）。

3. 挂载阶段

触发钩子：beforeMount
- 在挂载开始之前调用，此时模板已经编译完成，但还未将模板渲染到 DOM 中。
- 很少使用，除非需要操作编译前的 DOM。
挂载 DOM：
- Vue 将编译后的模板渲染为虚拟 DOM，并将其挂载到指定的 DOM 元素上（el 选项指定的元素）。
- 此时，Vue 实例的 $el 属性指向挂载的 DOM 元素。
触发钩子：mounted
- 挂载完成后调用，此时 DOM 已经渲染完成，可以操作 DOM。
- 适合执行依赖 DOM 的操作，如初始化第三方库。

二、挂载过程的详细流程图

beforeCreate -> created -> beforeMount -> 编译模板 -> 挂载 DOM -> mounted

三、代码示例

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例初始化之前');
    console.log(this.message); // undefined
  },
  created() {
    console.log('created: 实例创建完成');
    console.log(this.message); // Hello Vue!
  },
  beforeMount() {
    console.log('beforeMount: 挂载之前');
    console.log(this.$el); // undefined
  },
  mounted() {
    console.log('mounted: 挂载完成');
    console.log(this.$el); // <div id="app">...</div>
  }
};
</script>