Vue 生命周期

概念

每个Vue组件实例被创建后都会经过一系列初始化操作，比如：数据观测、模板编译，挂载实例到Dom上，以及数据变化之后更新DOM，这个运行过程叫做生命周期钩子函数，以方便用户在特定阶段加入自己的代码。

Vue的生命周期分为八个阶段：创建前后，挂载前后，更新前后，销毁前后，以及一些特殊场景的生命周期（activated等）,Vue3中新增了三个用于调试的生命周期。

Vue2	Vue3	描述
beforeCreated	beforeCreated	组件实例创建前
created	created	组件实例完全创建后
beforeMount	beforeMount	组件挂载前
mounted	mounted	组件挂载到实例上之后
beforeUpdate	beforeUpdate	组件数据发生变化，更新之前
updated	updated	组件数据更新之后
beforeDestroy	beforeUnmounted	组件实例销毁之前
destroyed	unmounted	组件实例销毁之后
activated	activated	keep-alive缓存的组件激活时
deactivated	deactivated	keep-alive缓存的组件停用时调用
errorCaptured	errorCaptured	捕获来自子孙组件的错误时被调用
-	renderTracked	调试钩子，响应式依赖被收集时调用
-	renderTriggered	调试钩子，响应式依赖被触发时调用
-	serverPrefetch	ssr only,组件实例在服务器上被渲染前调用

生命周期图变化

setup在beforeCreate之前

生命周期所做的事情

• beforeCreate：通常用于插件开发中执行一些初始化任务
• created：组件初始化完毕，可以访问所有data数据，获取接口数据等
• beforeMount：组件挂载前
• mounted：DOM已经创建，可以访问数据和DOM元素；访问子组件等
• beforeUpdate：此时视图层还没有更新，可以获取更新前各种状态
• updated：完成视图层更新，此时，所有的状态都是最新的
• beforeUnmounted：实例被销毁前调用，可以用于清除一些定时器以及订阅的取消
• unmounted：销毁组件实例，可以清理该组件与其他组件实例的连接，解绑它的全部指令以及事件监听器

为什么setup中没有beforeCreate和created

在Vue3中composition api，setup函数就相当于执行beforeCreate和created，从生命周期图中，可以看出setup执行是先于beforeCreate和crated的，我们使用钩子函数就是为了在前面先把这些东西预设埋下，在setup函数中，组件实例就已经被创建完成了，那么滞后的这两个钩子也就没有必要再使用了，没有任何意义。beforeCreate和created是options Api特有的，Vue3为了兼容Vue2也是把这两个钩子函数暴露出来了。