Vue インスタンスの作成から破棄までのライフサイクルの詳細な説明

この記事では、vue に関する関連知識を提供します。主に、作成から破棄までの Vue インスタンスのライフ サイクルの全プロセスを紹介します。ライフ サイクルとは、各 Vue インスタンスが次のプロセスを経る必要があることです。作成時の一連の初期化処理について見ていきますので、皆さんの参考になれば幸いです。

[関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル]

Vue は常に最優先事項でした。実際の開発でよく使用されるのはほんのわずかですが、ライフ サイクルを習得するかどうかが作成したプログラムが良いかどうかを決定します。この側面は常に Vue のインタビューの重要な部分でした。 . テストポイント。

新しい Vue の最初の紹介

新しい Vue について new キーワードが js 内のオブジェクトをインスタンス化することは誰もが知っているはずです。では、新しい Vue は何をしたのでしょうか?

実際には、新しい Vue は Vue インスタンスを作成します。Vue インスタンスはクラスです。新しい Vue は実際に Vue クラスのコンストラクターを実行します。

Vue インスタンスの作成:

let vm = new Vue({
   el: "#app",
   data: {
       name: 'beiyu'
   },
}

それでは、初期化から破棄までこのインスタンスに何が起こったのでしょうか?見てみましょう:

Vue インスタンスの作成から破棄まで

インスタンスの作成から破棄までのプロセスはライフサイクルと呼ばれます

ライフサイクルの基本概念:

各 Vue インスタンスは、作成時に一連の初期化プロセスを経ます。

例: データ監視の設定、テンプレートのコンパイル、DOM へのインスタンスのマウント、データ変更時の DOM 更新などを行う必要があります。同時に、ライフサイクルフックと呼ばれるいくつかの関数もこのプロセス中に実行され、ユーザーはさまざまな段階で独自のコードを追加する機会が得られます。

1. 作成前—beforeCreate()

Vue インスタンス オブジェクトが作成される前
el 属性と data 属性は両方とも空であり、多くの場合、応答しない変数を初期化します。

beforeCreate() {
    console.group("---创建前beforeCreate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data)
},

2. 作成後—created()

Vue インスタンス オブジェクトの作成後
data 属性が存在し、el属性は空で、 ref 属性の内容は空の配列であり、axios リクエストやページの初期化などによく使用されます。ただし、ここであまりにも多くのリクエストをリクエストしないでください。そうしないと、長い白い画面が表示されます。

created() {
    console.group("---创建之后created---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

3. インスタンス オブジェクトとドキュメントがマウントされる前—beforeMount()

Vue インスタンス オブジェクトとドキュメントがマウントされる前に、対応するテンプレート

は次のようになります。

beforeMount() {
    // 这个时候$el属性是绑定之前的值
    console.group("---挂载之前beforeMount---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

4 が見つかりました。インスタンス オブジェクトとドキュメントがマウントされた後—mounted()

Vue インスタンス オブジェクトとドキュメント ノードがマウントされた後
el 属性が存在し、 ref 属性にアクセスできます

mounted() {
    console.group("---挂载之后mounted---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

5. ビュー更新前—beforeUpdate()

ビュー更新前のビュー
レスポンシブ データが更新されるときに呼び出されます

beforeUpdate() {
    console.group("---更新之前beforeUpdate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

6. ビューの更新後—updated()

ビューの更新後
DOM が更新されます。ここでデータを操作しないでください。無限ループ

updated() {
    console.group("---更新之后updated---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

7 .インスタンスが破棄される前—beforeDestroy()

Vue インスタンス オブジェクトが破棄される前|この時点では、el と data は両方ともまだ残っています。通常、この手順ではタイマーが破棄され、グローバル イベントのバインドが解除され、プラグイン オブジェクトが破棄されます。操作を待ちます。

beforeDestroy() {
    console.group("---销毁之前beforeDestroy---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

8. インスタンスが破棄された後—destroyed()

Vue インスタンス オブジェクトが破棄された後|

destroyed() {
    console.group("---销毁之后destroyed---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

要約

vue2 のライフサイクルは上記 8 つのプロセスです。ページを見てみましょう。上記の印刷結果:

ページを開いてから完了するまでのライフ サイクルは 4 つあります。ページはここにあり、残りの 4 つのライフ サイクルは対応して表示されません

[関連する推奨事項: javascript ビデオ チュートリアル、vue。 js チュートリアル]

以上がVue インスタンスの作成から破棄までのライフサイクルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。