Vue.js は、開発者が動的 Web アプリケーションを構築するのに役立つ、人気のあるフロントエンド JavaScript フレームワークです。 Vue.js の重要な機能は、そのライフサイクル メソッドです。ライフサイクル メソッドは、Web アプリケーションで呼び出されたときに特定の時点で実行されるメソッドであり、開発者はこれを使用してコンポーネントの状態と動作を制御できます。
Vue.js にライフサイクル メソッドがあるのはなぜですか?それらは何に使われますか?この記事では、これらの問題について説明し、実際の Vue.js ライフサイクル メソッドを調査します。
Vue.js のライフサイクル メソッド
Vue.js コンポーネントでは、ライフサイクル メソッドは特定の順序で呼び出される一連のメソッドです。これらのメソッドは、コンポーネントが作成、更新、または破棄されるときに呼び出されます。各メソッドには特定の目的と使用例があり、これらのメソッドが実行される順序は「ライフサイクル」と呼ばれます。
Vue.js のライフサイクル メソッドは 3 つのカテゴリに分類されます:
1. 作成サイクル: beforeCreate、created、beforeMount、マウントなどのコンポーネントの初期化時に実行されるサイクル。
2. 更新サイクル: beforeUpdate と updated を含む、データが変更されたときに実行されるサイクル。
3. 破棄サイクル: beforeDestroy と破棄を含む、コンポーネントが破棄されるときに実行されるサイクル。
これらのサイクル メソッドを使用すると、開発者は、状態の初期化、非同期データの処理、イベント リスナーの登録、コンポーネントが破棄されたときのクリーンアップなどのライフ サイクル中に操作を実行できます。
ライフサイクル メソッドの使用
Vuejs コンポーネントを構築し、イベント リスナー、初期データ、コンポーネントの状態を追加することは、特に大規模なアプリケーションの場合、難しい場合があります。 Vue.js は、開発者がコンポーネントのライフサイクルを簡単に制御できるようにするいくつかのライフサイクル メソッドを提供します。これらの方法により、開発者はコンポーネントを適切に管理し、適切なタイミングで実行できるようになります。
次に、考えられる各サイクルの目的を示します。
たとえば、Ajax 呼び出しプロセスの場合、データを取得し、そのデータがインスタンス スコープ内に存在することを確認する必要があるため、beforeCreate メソッドと created メソッドを使用できます。 beforeMount メソッドとマウントされたメソッドを使用して、DOM 要素が更新可能かどうかを確認できます。メモリまたはその他のリソースが使用されている場合は、beforeDestroy メソッドと destroy メソッドを使用してそれらをクリーンアップできます。
ライフサイクルメソッドの実践的な応用
次の例を考えてみましょう:
<p>{{ message }}</p>
<script><br>デフォルトのエクスポート {<br> data() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return { message: "Hello World" };</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>},<br> created() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log("created called");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>},<br>mounted() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log("mounted called");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>},<br> updated() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log("updated called");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>},<br> 破棄されました( ) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log("destroyed called");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>}<br>};<br></script>
ライフサイクル メソッドの実行のデモンストレーションと表示を容易にするために、コードは console.info( ）。この例では、データ属性「message」と 4 つのライフサイクル メソッド (作成、マウント、更新、破棄) を定義します。
作成中、コンソールには「作成された呼び出し先」と出力されます。これは、この時点で Vue.js はコンポーネント オブジェクトのインスタンス化とデータとイベントの準備という作業を内部で完了していますが、まだページにレンダリングされていないためです。
次に、マウントされたフェーズで DOM と対話し、「mounted known」を出力します。これは、「マウント」中に表示され、DOM と対話できるためです。
コードが変更され続けると、データも変更されます。 updated はデータが更新されるたびに呼び出されます。 console.info() のログ出力が「更新された呼び出し」に変わります。
最後に、コンポーネントが破棄されると、destroyed が呼び出されます。 console.info()によると、「destroyed known」が出力され、インスタンス内のリソースの使用が停止され、コンポーネントのライフサイクルが終了します。
概要
Vue.js のライフサイクル メソッドは、開発者がコンポーネントの動作と状態を制御できるため、フレームワークの中核機能の 1 つです。ライフサイクル メソッドは特定の順序で実行されるため、開発者はコンポーネントの初期化、非同期データの処理、イベント リスナーの登録、コンポーネントが破棄されたときのメモリのクリーンアップなど、適切なタイミングで適切な作業を行うことができます。ライフ サイクル メソッドの存在により、開発者はアプリケーションのライフ サイクル全体をより適切に管理できるようになり、最適化されたアプリケーション エクスペリエンスが提供されます。
以上がなぜ vue にはライフサイクルがあるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
