vueのライフサイクル(フック関数)を理解する方法-jsチュートリアル-php.cn

vueのライフサイクル(フック関数)を理解する方法

清浅

リリース： 2020-10-13 09:52:15

オリジナル

39739 人が閲覧しました

Vue ライフサイクル (フック関数) は、Vue インスタンスオブジェクトの作成から破棄までのプロセスを表します。 Vue ライフサイクルフック関数は、実際には Vue インスタンスのオプションです。これらのオプションの値はすべて関数であり、誕生から消滅までインスタンスの生涯のさまざまな段階を表します。この段階に到達している限り、それは実行されます。自動的にトリガーされます。

vueのライフサイクル(フック関数)を理解する方法

# [おすすめコース: Vue チュートリアル #]

Vue のライフサイクルとは何を指しますか?

平たく言えば、Vue のライフサイクルとは、Vue で作成した Web ページがブラウザーで実行された後、作成したコードがメモリ内で実行される必要があることを意味します。たとえば、誰もが

var vm = new Vue(); と書きますが、これは new が Vue インスタンスを作成することを意味します。このインスタンスの作成から、ブラウザを閉じてインスタンスが終了するまで、この期間中に、Vue フレームワークは何をするのか、Vue インスタンスは何をするのか、最初に何を行うか、後で何を行うか、およびこの一連のことの間に関係があるでしょうか? はい、これが Vue のライフサイクルです。

Vue のライフサイクルは、作成フェーズ、実行フェーズ、破棄フェーズの 3 つのフェーズに分かれています。

図では、ライフサイクルの各部分に印を付け、必要な説明をいくつか加えました。

vueのライフサイクル(フック関数)を理解する方法

プロセスの説明 (12 のステップが図の操作に対応します):

1. Vue インスタンスを生成し、フック関数 beforeCreate( )。【インスタンス作成前】

2. インスタンスを初期化します。

3. インスタンスメンバーを View Model にマウントし、フック関数 created() を実行します。 [インスタンスの作成後]

4. el オブジェクトがあるかどうかを確認します [el オブジェクトは、制御するビューがどの領域であるかを示すために使用されます]。

5. el オブジェクトがある場合は、テンプレートが使用されているかどうかを判断します。

6. テンプレートを使用する場合はテンプレートのコンパイル方法に従い、使用しない場合は el で制御されるビュー領域をテンプレートとして描画します。フック関数 beforeMount() を実行します。 [インスタンスのマウント前]

7. 元の el ビュー領域を変更後の新しい el ビュー領域に置き換えます。 [インスタンスがマウントされた後] フック関数 Mounted() を実行します。

8. 実行フェーズに入る実行フェーズでは、いくつかの操作を実行し、フック関数 beforeUpdate() を実行します。 [データ更新前]

9. 操作が完了したら、データをページにレンダリングし、フック関数 updated() を実行します。【データ更新後】

10. 破棄フェーズに入り、フック関数 beforeDestroy() を実行【インスタンス破棄前】

11. モニター、サブコンポーネント、イベントリスナーを破棄し、逆アセンブルします。

12. 破棄が完了し、フック関数 destroy() が実行されます。 [インスタンス破棄後]

#ライフサイクルのフック関数は、Vue がライフサイクル中に実行する必要があるイベントであり、実際には関数です。
もちろん、これらのイベントにより、プログラマーは、Vue のライフサイクルがこの時点に達したときに必要な操作を実行できるようにコードを書くことができます。
インスタンスの作成フェーズと破棄フェーズの 6 つのフック関数は、常に 1 回実行されます。一度実行すると、再度実行されることはありません。

図で説明: 定義したインスタンスメンバーにアクセスできるのは、Vue ライフサイクルで init イベントが実行された後でのみです。この時点は、インスタンスメンバーが最初にアクセスされた時点でもあります。これを確認するために、コードの一部を見てみましょう。

<body>
    <div id="app"></div>
    //这里的路径为本机上的vue.js路径
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el : &#39;#app&#39;,
            data : {
                msg : &#39;我是初始值&#39;
            },
            methods : {
                show : function(){
                    console.log(this.msg);
                }
            },
            beforeCreate(){
                console.log(this.msg);
            },
            created(){
                console.log(this.msg);
            }
        });
    </script>
</body>

ログイン後にコピー

結果は次の図に示すとおりです。

vueのライフサイクル(フック関数)を理解する方法