黄朝忆的个人博客
登录|注册

vue3的生命周期和uni-app生命周期

创建 2025-04-21 11:462401 字364 浏览0 评论

vue3生命周期

     https://cn.vuejs.org/guide/essentials/lifecycle.html

    详情介绍:  https://cn.vuejs.org/api/composition-api-lifecycle.html


    onMounted()

        组件挂载到DOM完成后执行的函数。


    onUpdated()

        由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该函数


    onUnmounted()

        组件卸载完成后执行的函数


    onBeforeMount()

        已经完成了模板的编译,但是组件还未挂载到DOM上的函数


    onBeforeUpdate()

        组件更新之前执行的函数


    onBeforeUnmount()

        在组件实例被卸载之前调用


    onErrorCaptured()

        在捕获了后代组件传递的错误时调用


    onRenderTracked()

        当组件渲染过程中追踪到响应式依赖时调用


    onRenderTriggered()

        当响应式依赖的变更触发了组件渲染时调用


    onActivated()

        若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用


    onDeactivated()

        若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用


    onServerPrefetch()    

        注册一个异步函数,在组件实例在服务器上被渲染之前调用



uni-app中有分组件生命周期和页面生命周期两种,组件生命周期就是vue的生命周期了

注意:在uniapp组件中,onBeforeUpdate、onUpdated、onActivated、onDeactivated,H5支持,小程序无法使用



uni-app页面生命周期

    官方文档:  https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

    uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别


    onInit

        监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad


    onLoad

        监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)


    onShow

        监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面


    onReady

        监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发


    onHide

        监听页面隐藏


    onUnload

        监听页面卸载


    onResize

        监听窗口尺寸变化


    onPullDownRefresh

        监听用户下拉动作,一般用于下拉刷新    


    onReachBottom

        页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项


    onTabItemTap

        点击 tab 时触发,参数为Object,具体见下方注意事项


    onShareAppMessage

        用户点击右上角分享


    onPageScroll

        监听页面滚动,参数为Object


    onNavigationBarButtonTap

        监听原生标题栏按钮点击事件,参数为Object


    onBackPress

        监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack


    onNavigationBarSearchInputChanged

        监听原生标题栏搜索输入框输入内容变化事件


    onNavigationBarSearchInputConfirmed

        监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。


    onNavigationBarSearchInputClicked

        监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)


    onShareTimeline

        监听用户点击右上角转发到朋友圈


    onAddToFavorites

        监听用户点击右上角收藏


    通过onLoad获取url参数

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	
	onLoad((params) => {
		console.log(params, 'params')
	})
</script>


    uni-app最常用的三个生命周期及执行顺序

    onLoad > onShow > onReady


评论(共 0 条)

编辑器加载中...