Vue のライフサイクルとフック関数

1.ライフサイクルとは何か

Vue インスタンスには完全なライフサイクルがあり、作成、データの初期化、テンプレートのコンパイル、 Domマウント、レンダリング → 更新 → レンダリング、アンインストールなどの一連のプロセスが含まれます。これを Vue のライフサイクルと呼びます。簡単に言えば、Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。

Vue のライフサイクル全体を通じて、イベントがトリガーされたときにjsメソッドを登録できる一連のイベントが提供され、登録した独自の js メソッドで全体的な状況を制御できます。これらのイベント応答メソッドでは、 this vueインスタンスを直接指します。

2. Vueのライフサイクル

ライフサイクル関数、フック関数とも呼ばれます (ライフサイクルフック === ライフサイクル関数 === ライフサイクルイベント)

Vue のライフサイクル関数は通常、ペアで表示されます。そこで、ペアで比較して、違いを確認します。

覚えておくべきライフサイクル関数 10 個!具体的な使い方！

3. ライフサイクルフック関数

機能:自動的に呼び出されますが、呼び出し時間ノードは異なります。

公式サイトから写真を撮りました:

beforeCreate --- Vue インスタンスの「作成前」。注意:この関数では、Vue のデータセンター内のデータを読み取ることはできません。

  <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                名前:「ハハハ」、
                番号:1111
            },
            メソッド: {
                
            },
 
            // vueインスタンスが作成される前 beforeCreate(){
                コンソールにログを記録します。
                console.log(この名前);
            }
    </スクリプト>

出力データセンターの名前が読み取れません:

created --- vue インスタンスが作成された後、注意: この関数では、vue のデータセンター内のデータを識別できます <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                名前:「ハハハ」、
                番号:1111
            },
            // vueインスタンスが作成された後 created(){
                console.log("作成されました");
                コンソールにログ出力します。
            }
        })
    </スクリプト>

結果を表示:

beforeMount --- DOM this.$el---この時点での$elは「仮想」DOMノードです

ビューレベルでラベルをレンダリングします。

  <div id="アプリ">
        <p>{{名前}}</p>
        <p>{{数値}}</p>
    </div>
<script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                名前:「ハハハ」、
                番号:1111
            },
            //DOM がマウントされる前 beforeMount(){
                console.log("マウント前");
                   //DOM 要素を表示します console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </スクリプト>

domマウント前の出力結果:

 マウント済み --- DOM がマウントされた後 this.$el --- この時点で $el は「実際の」DOM ノードです <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                名前:「ハハハ」、
                番号:1111
            },
            // domがマウントされた後、mounted(){
                console.log("マウントされました");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </スクリプト>

出力を表示します。

beforeUpdate --- データが更新される前 (---- ビューレイヤーのデータの変更前と変更後)
updated --- データが更新された後 (---- ビューレイヤーのデータの前後の変更)

ビューレイヤーで、クリックして num の値を変更し、データの更新をシミュレートして結果を表示します。

  
    <div id="アプリ">
        <p id="num">{{num}}</p>
        <button @click="num++">クリックデータ更新 (num+1)</button>
    </div>
  //データ更新前 beforeUpdate(){
                console.log("beforeUpdate--データ更新前");
                // DOM 要素を表示します console.log(document.body.querySelector("#num").innerHTML);
            },
            //データが更新された後 updated(){
                console.log("updated--データが更新された後");
                // DOM 要素を表示します console.log(document.body.querySelector("#num").innerHTML);
            }

この時点では、データが変更されていない場合、コンソールでその効果を確認することはできません。ボタンをクリックすると、

Vue のライフサイクルとフック関数についての記事はこれで終わりです。Vue のライフサイクルフック関数についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: