Vue2 中使用 UniApp 时,生命周期钩子函数总结

在 Vue2 中使用 UniApp 时,生命周期钩子函数是一个重要的概念。它允许开发者在特定的时间点运行代码,管理组件的生命周期。以下是 Vue2 中 UniApp 常用的生命周期钩子函数总结:

1. beforeCreate

  • 说明: 组件实例刚被创建,此时数据观测和事件配置尚未开始。
  • 用途 : 很少直接使用,通常用于初始化一些状态,但在此时无法访问 datacomputedmethods

2. created

4. mounted

  • 说明 : 组件实例已经创建,数据观测和事件配置已完成,可以访问 datacomputedmethods

  • 用途 : 通常在这里进行数据的初始化,发起异步请求(如 API 调用),或设置定时器等。

    javascript 复制代码
    created() {
      console.log('组件实例已创建');
    }

    3. beforeMount

  • 说明: 在挂载之前调用,相关的 DOM 尚未被渲染。

  • 用途: 通常不需要在这里执行代码,因为这个生命周期在组件的初次渲染前。

  • 说明 : 组件挂载到 DOM 上后调用,此时可以通过 this.$el 访问组件的根 DOM 元素。

  • 用途: 适合进行一些 DOM 操作或发起需要依赖于 DOM 的异步请求。常用于选择器、图表等依赖于 DOM 的库初始化。

javascript 复制代码
mounted() {
  console.log('组件已挂载到 DOM');
}

5. beforeUpdate

  • 说明: 在数据更新后,DOM 仍然未更新时调用。
  • 用途: 可以在这里对即将更新的状态进行一些计算。
javascript 复制代码
beforeUpdate() {
  console.log('数据即将更新');
}

6. updated

  • 说明: DOM 更新完成后调用。
  • 用途: 通常用于在数据更新后需要进行 DOM 操作的场景。在这里依然可以为性能考虑避免不必要的操作。
javascript 复制代码
updated() {
  console.log('DOM 已更新');
}

7. beforeDestroy

  • 说明 : 在组件实例销毁之前调用,可以访问到实例(this)。
  • 用途: 进行清理工作,比如清除定时器、注销事件监听等,避免内存泄漏。
javascript 复制代码
beforeDestroy() {
  console.log('组件即将被销毁');
}

8. destroyed

  • 说明: 组件实例已经被销毁,所有的事件监听和子实例也会被清理。
  • 用途: 在这里可以明确地执行一些后续处理,或记账等。
javascript 复制代码
destroyed() {
  console.log('组件已被销毁');
}

9. activateddeactivated

  • 说明 : 当 <keep-alive> 组件的子组件被激活和停用时调用。
  • 用途: 适用于需要处理缓存状态的组件。

10. errorCaptured

  • 说明: 当子组件的错误被捕获时会调用。
  • 用途: 可用于错误处理,捕获子组件的错误并进行日志记录或判定布尔值以决定是否继续捕获。
javascript 复制代码
errorCaptured(err, vm, info) {
  console.error('捕获到错误:', err);
  return false; // 继续传播
}

总结

在 Vue2 的 UniApp 中,生命周期钩子函数提供了一种方便的方式来管理组件的不同阶段。通过合理地使用这些钩子函数,可以有效地控制数据流、处理 DOM 操作、清理资源等,从而提高应用的性能和用户体验。开发者可以根据需要选择合适的钩子函数来满足不同的业务需求,优化组件的行为。

相关推荐
YGY Webgis糕手之路7 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9499 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue86810 分钟前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie15 分钟前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_17 分钟前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到1127 分钟前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A34 分钟前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界36 分钟前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
前端Hardy1 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh1 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式