uniapp页面生命周期和组件生命周期

页面的生命周期
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参），参考示例

onShow 监听页面显示

onReady 监听页面初次渲染完成

onHide 监听页面隐藏

onUnload 监听页面卸载

onPullDownRefresh 监听用户下拉动作

onReachBottom 页面上拉触底事件的处理函数

onShareAppMessage 用户点击右上角分享 微信小程序

onPageScroll 监听页面滚动

onTabItemTap 当前是 tab 页时，点击 tab 时触发

<script>
 2 export default {
 3         data() {
 4             return {
 5                 title: 'Hello'
 6             }
 7         },
 8         onLoad() {
 9             console.log('页面加载')
10         },
11         onShow() {
12             console.log('页面显示')
13         },
14         onReady(){
15             console.log('页面初次显示')
16         },
17         onHide() {
18             console.log('页面隐藏')
19         },
20         onUnload() {
21             console.log('页面卸载')
22         },
23         onBackPress(){
24             console.log('页面返回...')
25         },
26         onShareAppMessage() {
27             console.log('分享!')
28         },
29         onReachBottom() {
30             console.log('下拉加载...')
31         },
32         onPageScroll(){
33             console.log('页面滚动...')
34         },
35         onPullDownRefresh() {
36             console.log('上拉刷新...')
37             uni.stopPullDownRefresh();
38         },
39         
40         // #ifdef APP-PLUS
41         onNavigationBarButtonTap(){
42             
43         },
44         // #endif
45         
46         methods: {
47             tap(){
48                 console.log('tap点击!');
49             }
50         }
51     }
52 </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>