在使用以Vue为架构的项目中，当业务逻辑越来越复杂，页面的组件层级结构也会随之增加。所以要想有清晰的逻辑思路，就肯定需要对各种父子组件钩子函数加载时机和执行顺序了如指掌。
Vue
Vue生命周期的官网定义：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
Vue生命周期总共分为：初始化 前后，创建 前后，更新 前后，销毁 前后。
常用的生命周期钩子函数
-
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 -
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$elproperty 目前尚不可用。 -
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。 -
mounted：实例被挂载后调用，这时el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。 -
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 -
destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
进入页面：页面组件实例化 --> DOM挂载
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child mounted
parent mounted
离开页面：实例销毁 --> DOM卸载
parent beforeDestroy
child beforeDestroy
child destroyed
parent destroyed
Vue官网生命周期图示：
Vue
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问：个人博客地址
