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

创建时间:2025-04-21 11:46
长度:2401
浏览:0
评论: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条)