Vue生命周期

Vue生命周期

在vue中，生命周期指组件从创建到销毁的过程，共分为8个阶段，又称为生命周期钩子

1、生命周期钩子函数

一个组件从创建到销毁的过程中，共有8个（4对）生命周期钩子函数
beforeCreate：初始化生命周期，此时无法通过组件实例访问到data、methods等
created：初始化数据代理、数据监测，此时可以通过组件实例访问到data、methods等
beforeMount：此时页面呈现的是未经vue编译的dom结构，所有对dom的操作，最终都不奏效
mounted：此时页面呈现编译后的dom结构。至此初始化的过程结束，可以在此进行一些初始化操作，例如：开启定时器、发送网络请求、绑定自定义事件等
beforeUpdate：此时数据是新的，页面是旧的，页面尚未和数据保持同步
updated：此时数据是新的，页面也是新的，页面完成数据同步
beforeDestory：此时组件即将进行销毁，组件实例的data、methods等仍可以访问，可以在此进行一些收尾操作，例如：关闭定时器、解绑自定义事件等
destoryed：组件实例销毁

注意：生命周期钩子函数不能写成箭头函数，否则this指向会出问题，导致无法访问组件实例的data、methods等

2、父子组件的生命周期钩子执行顺序

加载渲染时：父组件 beforeCreate --> 父组件 created --> 父组件 beforeMount --> 子组件 beforeCreate --> 子组件 created --> 子组件 beforeMount --> 子组件 mounted --> 父组件 mounted

子组件更新时：父组件 beforeUpdate --> 子组件 beforeUpdate --> 子组件 updated --> 父组件 updated

父组件更新时：父组件 beforeUpdate --> 父组件 updated

销毁时：父组件 beforeDestory --> 子组件 beforeDestory --> 子组件 destoryed --> 父组件 destoryed

3、路由组件的生命周期钩子

当路由组件被<keep-alive>包裹时，会缓存不活动的组件，组件在此切换时，两个路由组件独有的生命周期钩子会被相应触发，用于捕获路由组件的激活状态

activated：路由组件被激活时触发
deactivated：路由组件失活时触发