vue生命周期对比

阶段	vue2	vue3
组建实例创建之初	beforeCreate	setup
组建实例创建完毕	created	setup
组建实例挂载之初	beforeMount	onBeforeMount
组建实例挂载完毕	mounted	onMounted
组建实例更新之初	beforeUpdate	onBeforeUpdate
组建实例更新完毕	updated	onUpdated
组建实例卸载之前	beforeDestory	onBeforeUnmount
组建实例卸载完毕	destoryed	onUnmounted
keep-alive 缓存组建激活之时	activeted	onActiveted
keep-alive 缓存组建停用之时	deactiveted	onDeactiveted
捕获子孙组建错误时调用	errorCaptured	onErrorCaptured

阶段分析

beforeCreate

实例的初始化

created

1. 实例初始化完毕，此时可以调取：data， props， methods， watch， computed， inject 的数据。
2. $el此时没有创建

beforeMounted / onBeforeMounted

此阶段可以获取到$el，它完成了初始化，但并没有实际挂载el上

mounted / onMounted

1. 此时实例已经挂载和渲染，挂载点及内容已经替换成最新的了

beforeUpdate / onBeforeUpdate

1. 此时数据必须渲染在模版上的
2. 视图还未更新
3. 此时重新修改数据不会再次触发更新方法

updated / onUpdated

1. 已经完成了视图的更新
2. 此时修改数据会再次触发更新方法

beforeDestory / onBeforeUnmount

实例实际卸载之前，此时还可以访问到实例上的方法和属性

destoryed / onUnmounted

1. 组建卸载完成，此时删除了与之关联的指令及事件监听器
2. 仅仅是实例的销毁，DOM依然存在