今日は、Vue のライフサイクル メソッドについて詳しく説明します。Vue のライフサイクル フック関数とは、インスタンス化中に自動的に実行される関数を指します。これらの関数は、インスタンス化、レンダリング、更新、破棄など、カスタム Vue インスタンスのさまざまな段階を管理するのに役立ちます。ライフサイクルがどのように機能するかを理解すると、Vue アプリケーションの状態をより適切に管理できるようになります。それでは、早速始めてみましょう。
ライフサイクルのフェーズ図
Vue のライフサイクルは 8 つの段階に分けることができます。以下は、ライフサイクルの段階を示す図です。
- beforeCreate: インスタンスは作成されたばかりで、データ監視もイベント メカニズムも設定されていません。
- created: インスタンスが作成され、データ監視 (
dataプロパティなど)、イベント機構 (methodsなど) が設定されました。ただし、この時点では DOM ノードはまだマウントされていません。 - beforeMount: DOM ノードは生成されましたが、まだインスタンスにマウントされていません。
- Mounted: DOM ノードはインスタンスにマウントされており、
vm.$elプロパティは実際の DOM を指します。 - beforeUpdate: データは変更され、仮想 DOM が再レンダリングされる前にトリガーされます。再レンダリングは、仮想 DOM が計算される前に行われます。
- updated: 仮想 DOM が再レンダリングされて DOM に適用された後にトリガーされます。
- beforeDestroy: インスタンスが破棄される前にトリガーされ、この時点ではインスタンスはまだ利用可能です。
- destroy: インスタンスが破棄された後にトリガーされ、この時点ではインスタンスは使用できなくなります。
ライフサイクルのサンプルコード
以下は v-for 命令の更新ライフ サイクルの簡単な例ですupdated。このコンポーネントはwords配列の更新を監視します。v-for 命令の配列が変更されるたびに、新しい配列の内容がコンソールに出力されます。 。
<template>
<div>
<label>添加单词:</label>
<input v-model="inputValue" @keyup.enter="addWord">
<ul>
<li v-for="word in words" :key="word">{
{ word }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
words: [],
inputValue: ""
};
},
methods: {
addWord() {
if (this.inputValue) {
this.words.push(this.inputValue);
this.inputValue = "";
}
}
},
updated() {
console.log("Words updated", this.words);
}
};
</script>words上記のコードでは、配列の値が更新されるたびにupdatedフック関数がトリガーされ、最新の更新された配列の内容が出力されます。
要約する
このブログでは、Vue のライフ サイクルを詳しく紹介し、ライフ サイクルのフック関数の適用を示す簡単なサンプル コードを提供します。Vue ライフサイクルを使用する際の重要なポイントは、対応するフック関数がいつトリガーされるか、およびアプリケーション内でそれらのフック関数を使用するのに最適なタイミングを知ることです。このブログが、Vue ライフサイクルの使用方法をより深く理解するのに役立つことを願っています。