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コンポーネントは初期化されたが、データの原生観測、カスタム観測(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>