开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
前言
最近在学习 Vue 的生命周期，在这里总结下所学知识，如有缺陷，欢迎大家指正。
学习总结
Vue 的生命周期其实总共有 8 个函数，精简的说是有 4 对。它们分别来完成 Vue 实例在创建到销毁的过程中的所有操作。
具体内容
生命周期函数表
| 标题 | 作用 |
|---|---|
| 将要创建 | 调用 beforeCreate |
| 创建完毕 | 调用 created |
| 将要挂载 | 调用 beforeMount |
| 挂载完毕（重要） | 调用 mounted |
| 将要更新 | 调用 beforeUpdate |
| 更新完毕 | 调用 updated |
| 将要摧毁（重要） | 调用 beforeDestroy |
| 摧毁完毕 | 调用 destroyed |
创建
-
初始化：生命周期、事件、但数据代理还未开始
-
beforeCreate：此时无法通过 vm 访问到 data 中的数据、methods 中的方法
-
初始化：数据监测、数据代理
-
created：可以通过 vm 访问到 data 中的数据、methods 中的方法
-
vue 开始解析模板，生成虚拟 DOM（内存中），页面还不能显示解析好的内容
挂载
-
beforeMount：页面呈现的是未经 vue 编译的 DOM 结构，所有对 DOM 的操作均不奏效
-
将内存中的虚拟DOM转为真实DOM插入页面
-
mounted：页面呈现的是经过 Vue 编译的 DOM，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
更新
-
beforeUpdate：此时数据是新的，但是页面是旧的。即：页面尚未和数据保持同步
-
根据新数据，生成新的虚拟 DOM，随后与旧的DOM进行比较，最终完成页面更新。即：完成 Model——>View 的更新
-
updated：此时数据是新的，页面也是新的
销毁
-
beforeDestroy：vm 中所有的 data、methods、指令等都处于可用状态，马上要进行销毁。一般在此阶段进行关闭定时器、取消订阅消息、解除自定义事件等收尾操作
-
destroyed：一般不操作此函数
