Vue 2 和 3 中的生命周期

Question

定义

Vue 组件在初始化，挂载，更新，卸载时会触发一系列 hook，这些 hook 成为生命周期钩子函数

Vue 2

• beforeCreate 组件实例开始创建
• created 组件实例创建完成
• beforeMount 组件挂在之前
• mounted 组件挂载后
• beforeUpdate 组件更新前
• updated 组件更新后
• beforeDestroy 销毁前
• destroyed 销毁之后
• activated keep-alive 缓存的组件激活时
• deactivated kee-alive 缓存的组件切换时
• errorCaptured 子孙组件错误被捕获时

Vue Router : beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

Vue 3

更改： beforeDestroy -> beforeUnmount, destroyed -> unmounted
新增：

1. renderTracked 依赖被手机时调用
2. renderTriggered 依赖被触发时调用
3. serverPrefetch ssr 组件在服务端渲染前调用

常用用途

• created：获取数据
• mounted：获取数据，获取DOM
• beforeUnmount：清除定时器 和事件

和 setup 比较

setup 比 beforeCreate 先执行