Vueのいくつかの開発テクニック

1.親コンポーネントに子コンポーネントをバインドするライフサイクル
一般的な書き方は、サブコンポーネントのmountedで非同期メソッドを呼び出して対応するデータを取得してレンダリングすることです.もちろん、非同期メソッドのいくつかのパラメータはルーティングで取得することができ、親コンポーネントのpropsを介して伝達する必要がある場合もある.このコンポーネントの汎用性が高い場合、非同期呼び出しの方法とインタフェースが変化する可能性があるため、サブコンポーネントがレンダリングのみを担当することを望んでいます.これにより、以下の方法で実現することができる.
サブアセンブリ:

export default {
    mounted() {
        this.$emit('getData');
    }
}

親コンポーネント

 
@hookを使用するとコンポーネントのライフサイクルをリスニングでき、サブコンポーネント内ではレンダリングを担当するだけで、created、updatedなども使用できます.

 
2、タイマー解除
ページのマウント時にタイマーを使用する必要がある場合があります.それに応じて、ページの破棄時にタイマーをクリアする必要があります.次のコードは問題ないように見えますが、よく見てください.timerの唯一の役割は、beforeDestroy内でタイマシーケンス番号を取得できることだけであり、それ以外は何の役にも立たない.

export default {
    mounted() {
        this.timer = setInterval(() => {
            //     
        }):
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
}

ここでは、$onまたは$onceリスニングページのライフサイクル破棄によって、この問題を解決できます.

export default {
    mounted() {
        this.creatInterval(Date.now());
    },
    creatInterval(now) {
        let timer = setInterval(() => {
            console.log(now);
        }, 1000)
        this.$once('hook:beforeDestroy', function() {
            clearInterval(timer);
        })
    }
}