Vue のライフサイクル機能を 10 分で詳しく解説

この記事は、Vue の宣言サイクル機能に関する関連知識を提供します。Vue の宣言サイクルは 8 つの段階に分かれています。Vue 公式のサイクル チャートと併せて読むことをお勧めします。皆様のお役に立てれば幸いです。 ！

1.BeforeCreate()

Vue インスタンス は作成されましたが、データとメソッド内のデータとメソッドが初期化されていません。つまり、beforeCreated(){} で this を取得できます。これは現在の Vue インスタンスまたはコンポーネントを参照していますが、this.data と this.method は取得できません。

2.Created()

Vue のデータとメソッドが初期化されました。通常、データの初期化はこのフック関数内で行われます。

レンダリング関数は、この段階の後、BeforeMounte の前に実行されます。 Vue は、コードを仮想 DOM であるインメモリ DOM にレンダリングします。まだページには実装されていません。

この後、beforeMount の前に、Vue コンストラクターは構成アイテムに el 属性があるかどうかを確認します。 HTML ドキュメント内にノードがある場合は、それを置き換えます。次に、テンプレート オプションが指定されているかどうかを確認します。指定されている場合、ノードはテンプレートに置き換えられます。指定されていない場合、ノードは引き続き el に置き換えられます。

3.BeforeMount()

関数では、ページは仮想 dom に置き換えられる前の dom です

クリを作りましょう

let vm = new Vue({
        el: '#app',
        data: {
            message: 'wxs',
            arr:[1,2,3],
            obj:{
                name:'wxs',
                age:21
            }
        },
        beforeMount(){
            console.log(document.querySelector("#app"))
        },
        mounted(){
            console.log(document.querySelector("#app"))
        },
        methods:{
        },
        watch:{
        },
        template: `<p id="app"><p>{{message}}</p><p>{{arr[0]}}</p><p>{{obj.name}}</p><button>改变!</button></p>`,
    })

印刷結果をもう一度見てください

4.Mounted()

ページには要素が表示されます交換されたもの。

上記は、Vue コンポーネント作成時のフック関数です。

以下は、コンポーネントの実行時のフック関数です。

5.beforeUpdate()

このフック関数をトリガーする方法は、データの値を変更することです。このフック関数では更新前の値も取得できます。

このフック関数では、インターフェイスは更新されていませんが、データ値は更新されています。 (概要: 古いページ、新しいデータ)

更新後および更新前に、Vue はメモリ内で Virtual Dom の再レンダリングとマウントを密かに実行します。

6.update()

このフックでは、新しいインターフェイスの値と新しいデータ値を取得できます。 (概要: 新しいインターフェイス、新しいデータ)

テスト コードとスクリーンショット

let comp = {
        template: "<p><p>{{msg}}</p>  <button ref='btn' @click='change'>改变了</button></p>",
        data() {
            return {
                msg: '初始文字'
            }
        },
        methods: {
            change: function () {
                this.msg = '改变了'
            }
        },
        beforeUpdate() {
            console.log(document.getElementById('app').innerHTML)
            
        },
        updated(){
            console.log(document.getElementById('app').innerHTML)
        }
    }
    let vm = new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            comp
        },
    })

次のステップは破棄フェーズです

7。 beforedestroy( )

インスタンスの破棄フェーズに入ります。インスタンス内のすべてのデータとメソッドは引き続き使用できます。

8.destroyed()

関数インスタンスが破棄され、すべてのデータとメソッドが使用できなくなりました。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がVue のライフサイクル機能を 10 分で詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。