一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。
我要一步一步往上爬~大家好，我是努力不浪费每分每秒热爱生活的小朋友，今天我们来一起学习一下Vue的挂载流程！
生命周期定义
生命周期又可以叫做生命周期回调函数，或是生命周期函数，或者生命周期钩子，这是程序员叫的最多的方式，你应该不陌生。
生命周期是Vue在关键时刻帮我们调用函数，他们具有特殊的名称，这些名称都是不可以更改的，但是函数的具体内容是可以据需求来编写的
需要注意的是生命周期函数中的this指向是vm/组件实例对象
1. 创建实例阶段
--> new vue（）准备创建一个vue实例
--> init Events & Lifecycle：初始化，指定生命周期规则、事件，此时数据代理还没开始，也就是还没有vm._data
--> 钩子函数beforeCrete
-
时期：在数据监测、数据代理创建之前，实例还没有创建出来，无法通过vm访问data中的数据和methods中的方法
-
应用：根据一些信息判断是否需要向下渲染，如果不需要，跳转到其他组件
--> init injections & reactivity：初始化数据监测，数据代理。
2. compile阶段
--> 钩子函数Created
- 时期：此时Data和Methods已经挂载到实例上了，可以通过vm访问data中的数据，methods中的方法。
- 场景：一般会在这个阶段发送异步数据请求，而数据一般是从服务器获取，在没有获取到数据以前，第一次的渲染是没有数据的，拿到数据后可以通过修改数据控制组件重新渲染
--> 实例创建好后，有无el配置项？
- 没有 -- 查找是否执行vm.$mount（el）函数-- 是 -- 约等于指定了
el - 有 -- 是否有template？
-
是 ：将template编译到render函数中，render函数专门负责渲染，替换整个root模板
-
否：编译el的外部html作为模板 此阶段vue开始解析模板，生成虚拟DOM(内存里),页面还不能显示解析好的内容
-
--> 钩子函数beforeMount
- 时期：第一次渲染DOM之前，此时页面中还没有DOM元素，页面上呈现的全是未经vue编译的DOM结构，对DOM的所有操作最终都不奏效
3. 第一次渲染完成
--> template语法编译，将虚拟DOM转为真实DOM【dom diff】渲染到页面，往vm.$el里面存了一份
--> 钩子函数mounted
页面中呈现的都是经过Vue编译的DOM，此时对DOM的操作都是有效的，但是尽可能不要这么去做，到此时，初始化结束！一般此时会进行以下操作：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
