uni-app 頁面&組件生命周期

不論是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>