mpvue 生命周期

亦凉 2021-07-24 17:23 262阅读 0赞

兼容vue、小程序、app应用生命周期
    
    生命周期指向顺序:
    beforeCreated->created->onLoad->onReady->beforeMount->mounted
    
    每次修改数据都会重新指向小程序的生命周期函数
    小程序的类挂载等将会在onReady之后执行
    
    vue 部分:
        beforeCreate
        created
        beforeMount
        mounted
        beforeUpdate
        updated
        activated
        deactivated
        beforeDestroy
        destroyed
    
    app 部分：
        onLaunch，初始化
        onShow，当小程序启动，或从后台进入前台显示
        onHide，当小程序从前台进入后台
    
    page 部分(不建议使用)：
        onLoad，监听页面加载
        onShow，监听页面显示
        onReady，监听页面初次渲染完成
        onHide，监听页面隐藏
        onUnload，监听页面卸载
        onPullDownRefresh，监听用户下拉动作
        onReachBottom，页面上拉触底事件的处理函数
        onShareAppMessage，用户点击右上角分享
        onPageScroll，页面滚动
        onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
代码示例:

<template>
        <div>
            demo
        </div>
    </template>
    
    <script>
    export default { 
        beforeCreated()
        { 
            console.log('beforeCreated');
        },
        created()
        { 
            console.log("created");
        },
        beforeMount()
        { 
            console.log("beforeMount");
        },
        mounted()
        { 
            console.log("mounted");
        },
        onReady()
        { 
            console.log("onReady");
        },
        onLoad()
        { 
            console.log('onload');
        },
        onLaunch()
        { 
            console.log('onLaunch');
        }
    
    
    }
    </script>
    
    <style>
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200517150940504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/55f0bbfbd28743b1a940e6bc97bf13a3.png