1.Vue の 8 つのライフサイクル関数
beforecreate (作成前) は、この段階でインスタンスのデータ、計算されたプロパティ、メソッド、監視プロパティなどの処理を開始します 2.created (作成後) この段階でインスタンス
のプロパティを計算しますメソッド、ウォッチリスニング属性などが設定されていますが、コンポーネントはまだマウントされていません。
3.beforeMount (マウント前) コンポーネントがページにマウントされ始めます。
4.mouted (マウント後) コンポーネントのマウントが完了し、ここで ajax リクエストを行うことができますブラウザにはコンポーネントの dom 構造が既に含まれており、これは dom を操作できる最初の段階でもあります。
5.beforeUpdate（更新前）は、コンポーネント内のデータが更新されたときにトリガーされ、この時点ではデータは更新されていますが、ページ内のデータに関連するDOMはまだ更新されていません。
6.updated（更新） この度、最新のデータに基づいてページを更新しました。
7.beforeDestroy (破壊前) コンポーネントは破壊を開始する準備ができていますが、まだ正常に動作します。
8.destroyed（破壊後） コンポーネントは破壊されました。
コンポーネントの初期ロードの実行シーケンス。
コンポーネントが初めてロードされるとき、beforecreate (作成前)、created (作成後)、beforeMount (マウント前)、マウントされた (マウントされた後) がトリガーされます
。ライフサイクル関数の実行順序。
コンポーネントが更新された場合、トリガーされるフック関数は beforeUpdate --> updated です。
コンポーネントが破棄されるときのライフサイクル関数の実行シーケンス。
コンポーネントが破棄されると、トリガーされるフック関数は beforeDestroy —> destroy
親コンポーネントと子コンポーネントのライフサイクル関数
親コンポーネントと子コンポーネントが初めてロードされるときにトリガーされるライフサイクル関数と実行シーケンス
2 つのコンポーネントを作成し、次のコードを追加します
親コンポーネント // 親コンポーネントがロードされる前created,
beforeCreate() { console.log(“親コンポーネントを作成中です。create”); }, //親コンポーネントの作成後created() { console.log(“親コンポーネントが作成されました”); }, //親コンポーネントがマウントされる前beforeMount() { console.log("親コンポーネントがマウントされています"); }, //親コンポーネントがマウントされた後mount() { console.log("親コンポーネントがマウントされています"); }, //親コンポーネントがマウントされる前コンポーネントがマウントされました"); }, //親コンポーネントが更新される前beforeUpdate() { console.log("親コンポーネントがマウントされました" ); コンポーネントが更新されます"); }, //親コンポーネントが更新された後更新されましたupdated() { console.log("親コンポーネントが更新されました"); }, //親コンポーネントが破棄される前beforeDestroy() { console.log("親コンポーネント コンポーネントが破棄されました"); } 、
//親コンポーネントが破棄された後
destroy() { console.log("親コンポーネントが破棄されました"); },子コンポーネント// 子コンポーネントが作成される前beforeCreate() { console.log("子コンポーネント作成中"); }, //サブコンポーネントの作成後created() { console.log("サブコンポーネントが作成されました"); }, //サブコンポーネントのマウント前 beforeMount () { console.log("サブコンポーネントがマウントされています") ; }, //サブコンポーネントがマウントされた後 mount() { console.log("サブコンポーネントがマウントされました"); }, //サブコンポーネントが更新される前beforeUpdate() { console.log ("サブコンポーネントが更新されています" ); }, // updated() { console.log("サブコンポーネントが更新されました"); }, // beforeDestroy() { サブコンポーネントが破棄される前
console.log("サブコンポーネントが破棄されています");
},
//サブコンポーネントが破棄された後
destroy() { console.log("サブコンポーネントが破棄されています"); },コードを実行すると、コンソールが以下の結果が出力されます。 実行順序は親 beforeCreate --> 親 caeated --> 親 beforeMount --> 子 beforeCreate --> 子作成 --> 子 beforeMount --> 子マウント --> 親であることがわかります。親子コンポーネントの更新時にトリガーされるマウントステートメント 周期関数と実行順序親コンポーネントにデータを追加し、ボタンを定義 クリック後、a+1 data() { return { a: 1, };親コンポーネントと子コンポーネントのデータが更新されるときのフック関数の実行順序は、親 beforeUpdate --> 子 beforeUpdate --> 子更新 --> 親更新であることがわかります。
親コンポーネントと子コンポーネントが破棄されたときにトリガーされるライフサイクル関数の実行シーケンス 親
beforeDestroy --> 子 beforeDestroy --> 子の破棄 --> 親の破棄
- ライフサイクルメソッドの詳細説明
フック関数の詳細 シナリオメモ
beforeCreate インスタンスの初期化後、コンポーネントを作成します このとき、el、data、messageはすべてアンダーファイン化されます サーバーサイドアプリケーションのシナリオでは、loadingイベントを追加できます
インスタンスの作成後、ロード イベントを終了するためにデータとメソッドが初期化されます。特に返されたデータがバインディングに関連している場合は、この時点でリクエスト データを送信することをお勧めします。イベント beforeMount. 初期マウントの前に、EL の初期化が完了し、最初に呼び出されたときにレンダリングも送信できます。
サーバー側のレンダリング中にデータ リクエストは呼び出されません。
マウントは完了して DOM 要素を取得します。 el を実行し、DOM 操作を実行します。返されたデータ操作が DOM の完了に依存している場合は、この時点でデータ要求を送信することをお勧めします。beofreUpdate はサーバー側のレンダリング中に呼び出されません。マウントが開始される前に呼び出します。マウント前に既存の DOM にアクセスします
。追加されたイベント リスナーを手動で削除するなど、完了しました。データをさらに変更することもできます。サーバー レンダリング中には呼び出されません。初期レンダリングのみがサーバー側で更新を呼び出します。データが変更されたため、実行可能
DOM-依存する操作は、インターフェイスが再レンダリングされるときに呼び出されます。サーバー側のレンダリング中には呼び出されません。
アクティブ化されたキープアライブは、コンポーネントが
アクティブ化されている場合、サーバー側のレンダリング中に呼び出されません。非アクティブ化は、サーバー側のレンダリング中に呼び出されません。 beforeDestroyと呼ばれる
、確認メッセージを送信するためにインスタンスが破棄される前に delete Money が呼び出されます。クリーンアップ タイマーはサーバー側のレンダリング中に呼び出されません。
destroy インスタンスが破棄された後に呼び出されます。呼び出されると、すべてのバインドが解除され、すべてのイベント リスナーが移動され、子インスタンスが破棄されます。ヒントは削除されました。サーバー側のレンダリング中には呼び出されません。errorCaptured は、子孫コンポーネントからエラーをキャプチャするときに呼び出されます。
。エラー オブジェクト、エラーが発生したコンポーネント インスタンス、エラーの原因に関する情報を含む文字列の 3 つのパラメーターを受け取ります。False を返すと、エラーがさらに上方に伝播するのを防ぐことができます。コンポーネントのステータスを変更する 2.5.0 の新機能
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"