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 应用更加高效和稳定。

相关推荐
小墨宝3 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED18 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿22 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子23 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6635 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet