Vue生命周期

Vue实例有一个完整的生命周期，每个Vue实例在被创建时都需要经过一系列的初始化过程，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
共4对（8个）声明周期钩子（创建、挂载、更新、销毁）

整体流程

1、new Vue
实例化一个vue实例，然后初始化event和lifecycle。这个过程调用了三个初始化函数，分别初始化了生命周期、事件以及定义creatElement函数。

• 初始化声明周期定义的属性：当前生命周期的状态_isMounted,_isDestoryed,_isBeingDestroyed，表示keep-alive中组件状态的_inactive。
• 初始化event时定义了 $once, $off, $emit, $on等函数。
• 初始化render时定义了creatElement()函数

2、beforeCreate()
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和data还未初始化，因此无法访问methods，data，computed等方法和数据。
3、created()
实例已经创建完成之后被调用，在这一步，我们已经可以拿到data下的数据以及methods下的方法，可以开始调用方法进行数据请求了。
created执行完毕之后，需要判断当前是否有el参数，如果有，再看是否有template参数，如果没有el，那么我们会等待调用$mount(el)方法。
确保有了el后，判断当有template参数时，将template模板转换为render函数，如果没有template，那么我们直接将获取到的el编译成template，然后将template转换为render函数。
beforeMount()
实际上从created到beforeMount之间，最重要的工作就是将模板或者el转换为render函数。
beforeMount调用后，开始渲染render函数，首先产生一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成真实的dom。渲染成真是dom后，会将渲染出来的真实dom替换掉原来的vm. $el，然后将替换掉的 $el添加到我们的页面内。
mounted()
此时标识生命周期的一个属性_isMounted被置为true。所以在mounted函数内，我们可以操作dom，因为这个时候dom已经渲染完成。

只有当状态数据变化时，我们才出发beforeUpdate，要开始将变化后的数据渲染到页面上（会判断当前的_isMounted是不是true并且_isDestroyed是不是false,保证dom已经被挂载的情况下，当前组件未被销毁才会走updated流程）

beforeUpdate
会重新生成一个新的虚拟dom（VNode），然后拿这个最新的VNode和原来的Vnode去做一个diff运算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom，完成数据更新。
updated()
此时dom已经更新。此时虽然可以操作dom,但是最好不要在此时更新。
beforeDestroy()
在销毁实例之前，实例仍然可以调用，这一步还可以用this来获取实例，一般会在这一步做一些重置的操作，例如清除掉组件中的定时器和监听的dom事件。
destoryed
调用后，所有的事件监听会被移除，所有的子实例也会被销毁，该钩子在服务器渲染期间不被调用。

参考：https://www.jianshu.com/p/672e967e201c
https://blog.csdn.net/weixin_42707287/article/details/111641286（着重参考）