コンポーネントのライフサイクル
ofa.jsの中で、コンポーネントのライフサイクルは特定のタイミングでトリガされるフック関数です。これらのフック関数を使用すると、より詳細な制御とインタラクションが可能であり、ofa.jsには5つの主要なライフサイクルフックがあります：created、ready、watch、loaded、attachedおよびdetached。それぞれが異なるタイミングでトリガされます。
ライフサイクルフック
created
created フックは、コンポーネントが作成されるときにトリガーされます。この段階では、コンポーネントのデータは初期化されておらず、テンプレートの内容もレンダリングされていません。この段階で、初期化操作を行ったり、後続の段階で使用するデータを準備たりすることができます。
ready
readyの生命周期フックは、コンポーネントのデータとテンプレートが初期化された直後にトリガーされ、コンポーネントの準備が整ったことを示します。この段階では、コンポーネントのデータにアクセスすることができ、またテンプレートもレンダリングされているた、画面との相互作用に関連する操作を実行することができます。
如果テンプレートに他のコンポーネントへの依存関係がある場合、この段階では依存関係の読み込みを待つことはありません。したがって、この段階ではコンポーネントにLoadingのスタイルを追加することが適していますが、依存関係の読み込みが完了してから関連する操を実行するように注意する必要があります。
watch
ready フェーズが完了すると、関連付けられた watch オブジェクトのリスナー関数が一度だけトリガーされる。 その後、データの値が変更されると、対応するキーのリスナー関数が再び起動される。
loaded
loaded ライフサイクルフックは、コンポーネントテンプレート内のすべての依存関係がロードされた後にトリガーされます。この段階では、コンポーネントのレンダリング前に、すべての依存関係が完全にロードされていることが保証されます。この時点では、ready フェーズで追加されたローディングスタイルを削除するのに適しています。
attached
attachedライフサイクルフックは、コンポーネントがドキュメントに追加されたときにトリガーされます。この段階では、コンポーネント内の要素のサイズに関連する情報の取得、データバインディング、グローバルイベントの操作に適しています。
detached
detached のライフサイクルフックは、コンポーネントがドキュメントから削除される時にトリガーされます。この段階では、イベントの監視を解除したり、リソースを解放したりして、メモリリークを防ぐためにクリーンアップ操作を実行することができます。
例示デモ
以下は、これらのライフサイクルフックを使用する方法の例です：
export default {
data: {
count: 0,
},
watch: {
count(count) {
console.log("count: ", count);
},
},
created() {
console.log("created: Component created, data not initialized.");
},
ready() {
console.log(
"ready: Component is ready with initialized data and template."
);
this.on("click", () => {
this.count++;
});
},
attached() {
console.log("attached: Component attached to DOM.");
},
detached() {
console.log("detached: Component detached from DOM.");
},
};
生命周期フローチャート
