Uniapp生命周期
Uniapp 页面&组件生命周期
页面的生命周期
uni-app 支持如下生命周期函数:
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参)
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享 微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时,点击 tab 时触发。
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
console.log('页面加载')
},
onShow() {
console.log('页面显示')
},
onReady(){
console.log('页面初次显示')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
},
onBackPress(){
console.log('页面返回...')
},
onShareAppMessage() {
console.log('分享!')
},
onReachBottom() {
console.log('下拉加载...')
},
onPageScroll(){
console.log('页面滚动...')
},
onPullDownRefresh() {
console.log('上拉刷新...')
uni.stopPullDownRefresh();
},
// #ifdef APP-PLUS
onNavigationBarButtonTap(){
},
// #endif
methods: {
tap(){
console.log('tap点击!');
}
}
}
</script>
组件的生命周期
beforeCreate 组件初始化,但数据原生观测、自定义观测(eventwatcher)没生成之前。未完全创建阶段
created 组件创建后,但还未挂载完全创建阶段
beforeMount 组件渲染后,挂载前。渲染后待挂载
mounted 组件挂载到页面 可用 vm.$el 访问挂载OK
beforeUpdate 虚拟 DOM 重新渲染和打补丁之前再次渲染前
updated 组件 DOM 已经更新再次渲染后
activated keep-alive 组件激活时调用。当前组件被激活:显示
deactivated keep-alive 组件停用时调用。当前组件隐藏
beforeDestroy 实例销毁之前调用。实例仍然完全可用。销毁前
destroy Vue 实例销毁后调用
<script>
export default {
data() {
return {
title: 'Hello'
}
},
props:{},
beforeCreate() {
console.log('组件初始化,未完全创建阶段')
},
created() {
console.log('组件创建后,但还未挂载')
},
beforeMount(){
console.log('渲染后待挂载')
},
mounted() {
console.log('组件挂载到页面OK,可用 vm.$el 访问')
},
beforeUpdate() {
console.log('再次渲染前')
},
updated(){
console.log('再次渲染后')
},
activated() {
console.log('当前组件被激活:显示')
},
deactivated() {
console.log('当前组件隐藏')
},
beforeDestroy(){
console.log('销毁前')
},
destroy() {
console.log('销毁后')
},
methods: {
tap(){
console.log('tap点击!');
}
}
}
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!