【uniapp】生命周期(组件、页面)

简介: 【uniapp】生命周期(组件、页面)

官方介绍:页面简介 | uni-app官网

1.页面生命周期函数

生命周期钩子 描述 H5 App端 小程序 说明
beforeCreate 在实例初始化之后被调用
详情
created 在实例创建完成后被立即调用
详情
beforeMount 在挂载开始之前被调用
详情
mounted 挂载到实例上去之后调用
详情
注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
详情
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前
详情
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
详情
activated 被 keep-alive 缓存的组件激活时调用
详情
x
deactivated 被 keep-alive 缓存的组件停用时调用
详情
x
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用
详情
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
详情
errorCaptured 当捕获一个来自子孙组件的错误时被调用
详情
-

注意:

  • 页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
  • 推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
  • 推荐使用uni-app里面的onLoad 代替 vue 里面的 created

2.应用生命周期函数

onLaunch:当uni-app初始化完成时触发(全局只触发一次)
onShow:当uni-app启动,或从后台进入前台显示
onHide:当uni-app从前台进入后台
onError:当uni-app报错时触发
onUniNViewMessage:对nvue页面发送的数据进行监听
onUnhandledRejection:对未处理的Promise拒绝事件监听函数
onPageNotFound:页面不存在监听函数
onThemeChange:监听系统主题变化

注意:应用生命周期 仅可在App.vue中全局监听 ,在其它页面监听无效。

3.组件生命周期函数

uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:

函数名 说明 平台差异说明 最低版本
beforeCreate 在实例初始化之前被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

4.Vue生命周期函数

目录
相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
59 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
88 5
|
1月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
24 1
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
84 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
65 1
|
1月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
50 1
|
24天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
36 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
39 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
62 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
92 0