Vue实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂载DOM、更新、渲染、卸载等一系列过程。Vue在这个生命周期中暴露出许多的生命周期钩子,允许我们在合适的时机添加代码。
Vue的生命周期可分为三个阶段:
- 初始化阶段:从创建Vue实例到mounted组件挂载完成,对应的生命周期钩子有:
- beforeCreate:实例刚创建,数据观察和事件配置之前调用。
- created:实例创建完成,数据观察和事件配置之后调用。可在此发起后端请求获取初始数据等。
- beforeMount:模板编译完成,但未挂载至DOM之前调用。
- mounted:模板编译并挂载至DOM后调用。可在此发送后端请求获取DOM节点信息等。
2.运行阶段:从mounted到beforeDestroyed之间,对应的生命周期钩子有:
- beforeUpdate:响应式数据更新之前调用,发生在虚拟DOM打补丁之前。
- updated:响应式数据更新之后调用,组件DOM已经更新。
- activated:keep-alive组件激活时调用。
- deactivated:keep-alive组件停用时调用。
3.销毁阶段:从beforeDestroyed到destroyed之间,对应的生命周期钩子有: - beforeDestroy:实例销毁之前调用。可在此清除定时器或监听等防止引发内存泄漏。
- destroyed:Vue实例销毁后调用。内部子实例也会同时销毁。
这些生命周期钩子可以让我们在关键时机添加自己的代码来扩展Vue实例。理解Vue的生命周期,可以帮助我们在适当的阶段添加数据请求、DOM操作、添加订阅等自定义逻辑。