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 操作、清理资源等,从而提高应用的性能和用户体验。开发者可以根据需要选择合适的钩子函数来满足不同的业务需求,优化组件的行为。

相关推荐
前端橙一陈4 分钟前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~7 分钟前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技0120 分钟前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio1 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫2 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@2 小时前
前端发送请求时,参数的传递格式
前端
L李什么李2 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务3 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
linuxxx1103 小时前
ajax() 回调函数参数详解
前端·ajax·okhttp
王嘉俊9253 小时前
ThinkPHP 入门:快速构建 PHP Web 应用的强大框架
开发语言·前端·后端·php·框架·thinkphp