vue里的生命周期，也叫生命周期回调函数，是指vue在一些关键时刻引用的特定函数，这些函数的名称是确定的，这些函数中的this指向vue实例或组件实例
挂载流程
0️⃣初始化生命周期和事件，但数据代理还未开始
1️⃣beforeCreate() ➡️ 此时无法通过vue实例访问data中的数据以及method中的方法
2️⃣初始化数据代理
3️⃣created() ➡️ 此时可以访问实例内部的数据和方法了
4️⃣判断是否存在'el'配置选项
- ✅ 判断是否有template选项
- ✅利用render函数渲染模板
- ❌将el选项指定的容器及其所有子元素作为模板, i.e.
<div id="root">...</div>
- ❌ 只有当Vue.$mount调用时才会进入是否有template的判断
⚠️第四步vue开始解析模板，并生成虚拟DOM，但页面不能生成解析后的内容
5️⃣beforeMount() ➡️ 此时页面呈现的都是未经vue解析的内容，所有对DOM的操作都不会奏效，因为会被下一步的虚拟DOM替换真实DOM的操作覆盖
6️⃣vue实例有一个$el，用来替换目前的el，即将内存中的虚拟DOM插入真实DOM中
7️⃣mounted() ➡️ 此时页面呈现经过vue编译的DOM，这时对DOM的操作都是有效的，但需要避免
⚠️初始化到这一步结束，一般在此进行开启定时器，绑定自定义事件等初始化操作
更新流程
核心思想：只要vue实例中有数据发生了改变，页面/模板就会发生改变
1️⃣beforeUpdate() ➡️ 数据更新，但页面尚未更新
2️⃣ 新数据生成了新的虚拟DOM，随后与旧DOM进行对比，从而完成对页面的更新
3️⃣updated() ➡️ 此时页面完成了更新，与数据保持了同步
销毁流程
只有当Vue.$destroy()被调用时才会进入该流程➡️不推荐，推荐使用条件渲染来控制
1️⃣ beforeDestroy() ➡️ 此时实例中的数据，方法，指令仍是可用的，但是没必要继续操作了(都要销毁了)；一般这时候执行一些收尾操作，例如取消订阅，关闭定时器等
vue官网图例
vue2 lifecycle diagram https://v2.vuejs.org/v2/guide/instance#Lifecycle-Diagram
vue3 lifecycle hook: https://vuejs.org/guide/essentials/lifecycle.html