Vueライフサイクル機能（詳細説明）

作成前、作成済み	作成前、作成後
前マウント、マウント	マウント前、マウント後
更新前、更新済み	アップデート前、アップデート後
前破壊、破壊	破壊前、破壊後

次の 4 つのアプリケーションシナリオ用の統一された HTML コード

<div id="app">
    {
   
   {myName}}
</div>

beforeCreate と created の違い

作成前、作成後

beforeCreate はアプリケーションシーンを作成する前に作成します。

Vue コード:

var app = new Vue({
        el: '#app',
        data() {
            return {
                myName:'abc',
            }
        },
        beforeCreate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("created",this.myName,bodyDom);
        }
    });

ブラウザ出力:

beforeCreateのデータのデータが定義されておらず、createの後に未定義が続き、{ {myName}}が認識されていません

作成されたアプリケーションシナリオ作成後の

Vue コード:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    created(){
        //获取body并输出测试
        var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
        console.log("created",this.myName,bodyDom);
    }
});

ブラウザ出力:

created は主にページデータの初期化作業を行い、myName の値を取得していますが、背景に表示されている {{myName}} の値はまだ入力されていません

beforeMountとmountedの違い

マウント前、マウント後

beforeMountマウント前のアプリケーションシナリオ

Vue コード:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeMount(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

ブラウザ出力:

出力結果は作成後、マウント前と同じで、あまり役に立たない気がします

マウントされたアプリケーションのシナリオ

Vue コード:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    mounted(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

ブラウザ出力:

データがビューにレンダリングされました

beforeUpdateとupdatedの違い

更新前、更新後、他の 3 つの違いは繰り返すことができます

Updateアップデート前のアプリケーションシナリオ

Vue コード:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeUpdate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

ブラウザ出力:

データ更新前にデータは変更されていません

更新後のアプリケーションシナリオを更新しました

Vue コード:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    updated(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

ブラウザ出力:

データ更新後、データが変更されました

beforeDestroyとdestroyの違い

破壊前、破壊後

beforeDestroy破壊前

一般的に適用されるシナリオ:

タイマーをクリアする
カスタムイベントのバインドを解除する
購読解除、イベントリスナー

特定のコードデモはありません

破壊された_

このフック関数はコンポーネントインスタンスが破棄された後に実行されますが、このときサブコンポーネントを含むすべてのコンポーネントが破棄されます。

特定のコードのデモはありません

要約する

いくつかのライフサイクル機能には独自の特徴があり、ビジネスごとに異なるライフサイクル機能を使用して問題を解決します。