keep-alivevue 组件生命周期
时间: 2023-07-08 22:36:04 浏览: 51
在 Vue 组件中,有如下的生命周期钩子函数(按调用顺序):
1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created:实例创建完成后被立即调用。在这一步,实例已经完成了数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate:在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。这里无法访问到更新后的 DOM。
6. updated:在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时,组件 DOM 已经更新,所以可以执行依赖于 DOM 的操作。
7. activated:keep-alive 组件激活时调用。
8. deactivated:keep-alive 组件停用时调用。
9. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
10. destroyed:实例销毁之后调用。该钩子被调用后,Vue 实例指示的所有东西都会解绑定,所有事物都会被销毁,所有事件监听器都会被移除。
需要注意的是,在组件中使用 keep-alive 时,组件的生命周期还会多出两个钩子函数:activated 和 deactivated。这两个钩子函数会在组件被缓存时调用,用于控制缓存期间组件的行为。当组件被激活时,activated 钩子函数会被调用;当组件被停用时,deactivated 钩子函数会被调用。