Vue 2 生命周期详解

Vue 2 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中,Vue 提供了多个生命周期钩子,允许我们在不同阶段执行代码。以下是 Vue 2 生命周期的详细解析:

1. 创建阶段 (Creation)

  • beforeCreate: 在实例初始化之后,数据观测和事件/侦听器配置之前被调用。在这一步,data 属性和 methods 方法还未被初始化,因此不能访问。
  • created: 实例已经创建完成,数据观测、属性和方法的运算以及事件/侦听器的配置已经完成。然而,挂载阶段还没开始,$el 属性目前不可见。

2. 挂载阶段 (Mounting)

  • beforeMount: 在挂载开始之前被调用,相关的 render 函数首次被调用,模板开始编译,但 $el 还未挂载到实例上。
  • mounted: 实例被挂载到 DOM 后调用。此时,可以访问到 $el 属性,并且模板中的 HTML 已经被渲染到页面上。这个阶段适合执行 DOM 操作或者执行依赖于 DOM 的操作,如发送 AJAX 请求或者绑定自定义事件。

3. 更新阶段 (Updating)

  • beforeUpdate: 在数据变化导致虚拟 DOM 重新渲染和打补丁之前调用。此时,可以在这个钩子中进一步地更改状态,不会导致无限循环的调用。
  • updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时,组件 DOM 已经更新,可以执行依赖于最新 DOM 的操作。

4. 销毁阶段 (Destruction)

  • beforeDestroy: 在实例销毁之前调用。实例仍然完全可用,在这个生命周期钩子中,可以执行清理工作,如清除定时器、移除自定义事件监听等。
  • destroyed: 实例销毁后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。

5. 特殊钩子 (Special Hooks)

  • activated: 仅在 keep-alive 组件中生效,当组件被激活时调用。
  • deactivated: 仅在 keep-alive 组件中生效,当组件被停用时调用。

代码示例

javascript 复制代码
new Vue({
  data: {
    a: 1
  },
  beforeCreate() {
    console.log('beforeCreate: 数据和方法还未初始化');
  },
  created() {
    console.log('created: 数据和方法已初始化,但 DOM 还未挂载');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译完成,但 DOM 还未挂载');
  },
  mounted() {
    console.log('mounted: DOM 已挂载,可以执行 DOM 操作');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新,DOM 未渲染');
  },
  updated() {
    console.log('updated: 数据更新,DOM 已渲染');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前,可以进行清理操作');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
});

总结

理解 Vue 2 的生命周期对于开发者来说非常重要,它可以帮助我们在合适的时机进行数据获取、事件绑定、资源清理等操作。通过合理使用生命周期钩子,可以使我们的 Vue 应用更加高效和稳定。

相关推荐
10年前端老司机37 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js