美文网首页
uni-app 页面&组件生命周期

uni-app 页面&组件生命周期

作者: 理子 | 来源:发表于2020-12-24 10:29 被阅读0次

不论是app还是小程序,生命周期是非常重要的知识点。

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 组件初始化,但数据原生观测、自定义观测(event\watcher)没生成之前。 未完全创建阶段
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>

ps:
https://blog.csdn.net/FantasyWeirdo/article/details/107058982

相关文章

  • 1.uni-app的相关介绍使用

    uni-app的基本使用 基础部分: +环境搭建 +页面外观配置 +数据绑定 +uni-app的生命周期 +组件的...

  • uniapp 基础

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni入门文档

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • UNIAPP入门教程

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni-app基础知识

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uniapp基础知识

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni-app微信小程序开发 - 生命周期

    uni-app的生命周期分为应用生命周期和页面生命周期还有组件生命周期。 应用生命周期[https://uniap...

  • uni-app 页面生命周期

    uni-app 页面生命周期 页面生命周期 uni-app 支持如下页面生命周期函数: onLoad 监听页面加载...

  • uni-app简介

    环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 条件注释跨端兼容 uni-app的事件 导...

  • 7.页面生命周期与组件生命周期区别

    1.页面生命周期与组件生命周期区别 推荐使用uni-app里面的onReady 代替 vue 里面的 mounte...

网友评论

      本文标题:uni-app 页面&组件生命周期

      本文链接:https://www.haomeiwen.com/subject/nyapnktx.html