vue2的生命周期和狗子
时间: 2023-10-26 20:28:26 浏览: 167
Vue生命周期示例详解
Vue 2 的生命周期包括以下几个阶段:
1. 创建阶段(Creation Phase):
- beforeCreate:实例刚在内存中被创建,但是 data 数据和 methods 方法都还未初始化。
- created:实例已经完成了数据初始化,可以访问 data 和 methods,但是此时还未挂载到 DOM 上。
2. 挂载阶段(Mounting Phase):
- beforeMount:实例正在挂载前,DOM 还未生成。
- mounted:实例已经挂载到 DOM 上,可以进行 DOM 相关的操作。
3. 更新阶段(Updating Phase):
- beforeUpdate:响应式数据更新时,在重新渲染之前调用。
- updated:重新渲染完成后调用。
4. 销毁阶段(Destruction Phase):
- beforeDestroy:实例销毁前调用,此时实例仍然完全可用。
- destroyed:实例已经销毁,所有的事件监听器和子组件都被移除。
其中,beforeCreate 和 created 阶段主要用于初始化数据和事件,beforeMount 和 mounted 阶段主要用于操作 DOM,beforeUpdate 和 updated 阶段主要用于监听数据的变化并执行相应的操作,beforeDestroy 和 destroyed 阶段主要用于清理工作和释放资源。
需要注意的是,在 Vue 2 中还有一些其他的生命周期钩子函数可供使用,比如 activated 和 deactivated(用于 keep-alive 组件),以及 errorCaptured(用于捕获子孙组件的错误)。
阅读全文