生命周期相关
-
定义：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如数据监测，模板编译，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中会运行被称为生命周期钩子的函数，让开发者可以在特定阶段运行自己的代码。
-
Vue生命周期总共分为8个阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期，Vue3新增了3个用于调试和服务端渲染场景。
Vue2 Vue3 描述 beforeCreate beforeCreate 组件实例被创建之初 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，组件实例在服务器上被渲染前调用 -
结合实践
-
beforeCreate：通常用于插件开发中执行一些初始化任务（比如向App实例注入全局变量、全局属性等）；
-
created：组件初始化完毕，可以访问各种数据，获取接口数据等；
-
mounted：dom已创建，可用于获取访问数据和dom元素、访问子组件等；
-
beforeUpdate：此时view层还未更新，可用于获取更新前各种状态；
-
updated：完成view层的更新，更新后，所有状态已是最新；
-
beforeunmounted：实例被销毁前调用，可用于一些定时器或订阅的取消；
-
unmounted：销毁一个实例，可清理与其它实例的连接，解绑它的全部指令及事件监听器；
-
-
tips1：setup和created谁先执行？为什么setup中没有beforeCreate和created？
- setup最先执行，此时组件实例在setup内部已经创建，所以created的处理对于setup来讲明显在后面，对于开发者来说已经没有意义， 所以setup中没必要再使用beforeCreate和created。
-
官方最新生命周期示意图
-
