ホームページ >ウェブフロントエンド >jsチュートリアル >vueのライフサイクル(フック関数)を理解する方法
vueのライフサイクル(フック関数)を理解する方法
- 清浅オリジナル
- 2019-04-18 15:57:3839729ブラウズ
Vue ライフ サイクル (フック関数) は、Vue インスタンス オブジェクトの作成から破棄までのプロセスを表します。 Vue ライフ サイクル フック関数は、実際には Vue インスタンスのオプションです。これらのオプションの値はすべて関数であり、誕生から消滅までインスタンスの生涯のさまざまな段階を表します。この段階に到達している限り、それは実行されます。自動的にトリガーされます。
# [おすすめコース: Vue チュートリアル #]
Vue のライフサイクルとは何を指しますか?
var vm = new Vue(); と書きますが、これは new が Vue インスタンスを作成することを意味します。このインスタンスの作成から、ブラウザを閉じてインスタンスが終了するまで、この期間中に、Vue フレームワークは何をするのか、Vue インスタンスは何をするのか、最初に何を行うか、後で何を行うか、およびこの一連のことの間に関係があるでしょうか? はい、これが 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 回実行されます。一度実行すると、再度実行されることはありません。
<body>
<div id="app"></div>
//这里的路径为本机上的vue.js路径
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
msg : '我是初始值'
},
methods : {
show : function(){
console.log(this.msg);
}
},
beforeCreate(){
console.log(this.msg);
},
created(){
console.log(this.msg);
}
});
</script>
</body>結果は次の図に示すとおりです。
以上がvueのライフサイクル(フック関数)を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。