首页 > 其他分享 >Uniapp生命周期

Uniapp生命周期

时间:2023-09-07 19:23:47浏览次数:37  
标签:Uniapp 生命周期 console log 渲染 组件 挂载 页面

Uniapp 页面&组件生命周期

页面的生命周期

uni-app 支持如下生命周期函数:

onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参)
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享 微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时,点击 tab 时触发。

<script>
export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onl oad() {
            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>

标签:Uniapp,生命周期,console,log,渲染,组件,挂载,页面
From: https://www.cnblogs.com/mznsndy/p/17685860.html

相关文章

  • uniApp 再下一页修改上一页的值
    letpages=getCurrentPages();//获取所有页面栈实例列表 letnowPage=pages[pages.length-1];//当前页页面实例 letprevPage=pages[pages.length-2];//上一页页面实例 if(prevPage.$vm.info.SN!=undefined){ prevPage.$vm.info.SN=str; ......
  • uniapp 开发安卓/ios文件读写
    利用5+appnative.jsio文件管理模块1.新建js文件//文件写入exportconstwriteFileIos=function(filename,data){ plus.io.requestFileSystem( plus.io.PUBLIC_DOCUMENTS,//文件系统中的根目录 fs=>{ //创建或打开文件,fs.root是根目录操作对象,直接fs表示......
  • Spring源码分析(十)Spring中Bean的生命周期(下)
    在上篇文章中,写了bean的生命周期的简单介绍,主要介绍了整个生命周期中的初始化阶段以及基于容器启动停止时LifeCycleBean的回调机制。另外对bean的销毁过程也做了简单介绍,但是对于整个bean的生命周期,这还只是一小部分,在这篇文章中,我将继续完成剩下部分的内容,同时对之前的内容做一次......
  • 淘宝客APP源码社交电商uniapp开发源码前端源码自营商城
    需要一定基础,小白慎入。这套程序一个用户花了3000大洋买的,里面看了大致的功能,因为只是搭建看的后台,所以不是很标准,感兴趣的可以自行研究:    压缩包:材料自取,提取码:ffkx1.首页基础装修2.丰富选品库3.淘口令解析4.支持京东5.支持淘宝6.支持聚划算7.三级返利8.支持拼......
  • 淘宝客APP源码社交电商uniapp开发源码前端源码自营商城
    需要一定基础,小白慎入。这套程序一个用户花了3000大洋买的,里面看了大致的功能,因为只是搭建看的后台,所以不是很标准,感兴趣的可以自行研究1.首页基础装修2.丰富选品库3.淘口令解析4.支持京东5.支持淘宝6.支持聚划算7.三级返利8.支持拼多多9.拉新活动支持10.早起红包11.本地商圈功能13......
  • uniapp项目实践总结(十一)自定义网络检测组件
    导语:很多时候手机设备会突然没网,这时候就需要一个网络检测组件,在没网的时候显示提示用户,提供用户体验。目录准备工作原理分析组件实现实战演练案例展示准备工作在components新建一个q-online文件夹,并新建一个q-online.vue的组件;按照前一篇所说的页面结构,编写好预......
  • vue3+typescript +uniapp中select标签
    <select:value="state.year"@change="handleSelectChange($event.target)"> <option:value="i"v-for="iinstate.yearrange">{{i}}</option> </select> ts的代码:``相当于v-model<se......
  • uniapp项目实践总结(十)自定义滑动触摸组件
    在APP的日常开放过程中,我们经常可以看到上拉刷新、下拉刷新、左滑、右滑、触底加载等效果,那其中的原理是如何呢,又是如何实现的呢,下面就一探究竟。这篇文章主要是讲述自定义滑动触摸组件的方放,兼容网页H5端、微信小程序端和App端。目录准备工作原理分析组件实现实战......
  • ASP.NET MVC Preview生命周期分析
    我们从UrlRoutingModule开始,历经MvcRouteHandler、MvcHandler、Controller、ActionFilterAttribute,直到最后的ViewEngine、ViewPage.完成了整个ASP.NETMVC的生命周期探索。做ASP.NETWebForm开发都知道,ASP.NET有复杂的生命周期,学习ASP.NETMVC就要深入......
  • 在uniapp中如何将PDF或者XML文件转化成base64?
    场景:如何将获取到的内网服务器的文件,传给我们的后台,把文件保存下来?1.使用uni.downloadFile()获取到文件的临时路径2.uniapp导入安装的的插件“image-tools”,把临时路径转化成base64传给后台。注意点:如果同时解析多个xml文件,后台可能会接收到乱码的情况,此时需要将base64使用enc......