APIを使った場合のライフサイクルにて確認します。気にしておいたほうがよさそうな下記のライフサイクルのサンプルコードを作成して試してみました。・Created・Mounted・Updated・Unmounted下記は公式のリンクで、Vue.js(v2)のOpenAPIから変わったメソッドの一覧です。unmounted)ライフサイクルのサンプルコードの解説LifeCycleコンポーネントを呼び出す親コンポーネント親コンポーネントのサンプルコードの解説ライフサイクルの動作確認VueのライフサイクルとはVueで作成したコンポーネントが生成されて、消えるまでの状態遷移のことです。この状態遷移にフックさせることで、特定の状態の時に行いたい処理を書くことができます。画面が表示された初回のみに処理をしたい場合はcreatedに書きます。やるのは、初回の情報取得などの処理を書いたりします。画面が更新された場合の処理はupdated、コンポーネントが消えたときにはunmountedなどコンポーネントの状態が変わった場合の処理を、それぞれに書くことができます。今回サンプルで使うライフサイクルフックには下記の意味があります。・Createdデータが初期化された最初の一回のみ呼び出されます。・Mountedコンポーネントが読み込まれて、DOM要素にマウントされるときに呼び出されます。beforeMountが先に呼ばれて、その後にmountedが呼ばれます。・Updated画面上のデータが変更されて適用されたときに呼ばれます。beforeUpdateが呼ばれた後に、updatedが呼ばれます。・Unmounted画面上からコンポーネントが破棄されたときに呼ばれます。公式のリンク先にも書いていますが、冒頭にあげたライフサイクルのみまとめてみました。onUnmountedbeforeCreateとcreatedが無くなって、作成時の処理はsetupメソッド内に直接書くようになりました。あとは、メソッド名が「on〜」とonから始まるメソッドになりました。APIでは、ライフサイクルフックを使用するときにimportして使うようにします。次項に実際のサンプルを書いてみました。unmounted)LifeSycle.vueという名前で、下記のコードを書きました。life-cycleというタグ名で、アプリにマウントしています。}})</script>ライフサイクルのサンプルコードの解説Vue.js(v2)ではcreatedやmountedをそのまま使っていました。APIでライフサイクルフックを使うときには、コードでやっているようにimportして使うようになりました。mountedを使う場合は、このような感じです。'vue'後はサンプルコードのように、setupメソッド内にimportしたonMountedを使って処理を書いてあげると良いです。APIではbeforeCreateとcreatedがなくなりました。その代わりにsetupメソッドに直接created時の処理を書くようになりました。今回のコードではsetupメソッドの中で、onBeforeMountやonMountedなどそれぞれのライフサイクルの処理を書いています。console.logで、それぞれ呼び出されたときにブラウザのコンソールに出力されるようにしています。それと、onBeforeUpdatedやonUpdatedが呼ばれるようにtextという名前の変数を作っています。作成したtext変数をテキストボックスのv-modelに使っています。これでテキストボックスの内容が変わるたびにonBeforeUpdatedとonUpdatedが呼ばれます。LifeCycleコンポーネントを呼び出す親コンポーネント親コンポーネントのコードです。LifeCycle.vueの子コンポーネントを呼び出して操作します。}})</script>親コンポーネントのサンプルコードの解説templateタグの中で、作成したLifeCycleコンポーネントを呼び出しています。LifeCycleコンポーネントの下にはボタンを一つ用意しました。クリックすることで、LifeCycleコンポーネントを表示したり、非表示にしたりします。scriptの中では、表示/非表示のフラグ(isShow変数)を用意しています。その下に表示/非表示の切り替えメソッド(toggleIsShow)を用意して、returnで返すようにしています。これをタグの中で設定して使っています。表示すると下記のようになります。updateの順番で動いているのがわかります。unmountedが動いているのが確認できました。mountで動きます。今回は表示/非表示をv-ifで切り替えているので、mounted・unmountedが動きました。update・updatedが動くので注意が必要です。//Vue.js記事一覧へJavaScriptVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクPythonPythonのcontinueの使い方!(ループをスキップ)Pythonでcontinueを使う方法について書いています。continueについて解説した後に、下記のことについて書いています。最小値取得のサンプルコード5選!Pythonのmin関数の使い方について書いています。min関数を使うことで、渡した値やイテラブルのデータから最小値を見つけることができます。最初にmin関数の使い方について解説して、次にいろいろなデータ型を渡したサンプルコードを紹介してい...Python【Python入門】クラスを使う方法!(解説とサンプルコード)Pythonでクラスを使う方法について書いています。クラスについての解説と、実際にクラスを作っているサンプルコードを載せています。クラスの解説については、下記のことについて書きました。・クラスの作り方・コンストラクタについて・インスタンス変...MySQLMySQLの学習におすすめ本3選!【現役エンジニア選定】MySQLの学習におすすめの本を3つ紹介します。最初にMySQLについて簡単に説明して、その後におすすめの本を紹介しています。最後に、MySQLを「どの本で学ぶと良いか」の考えてまとめていますので、確認してみてください。※Amazonのお試...PythonPythonのif文で変数や値を指定したときの挙動12個!Pythonのif文に変数を直接指定して、判定したときの挙動を確認してみました。載せているコードはPythonのバージョン3.10.7で確認しました。if文に値を指定して、挙動を確認するif文に直接、変数や値を指定して、挙動を確認してみまし...PythonPythonで文字列を結合(連結)する3つの方法!Pythonで文字列を結合する方法について書いています。文字列を結合する場合には、下記の演算子やメソッドを使用できます。・プラス演算子(`+`)を使う・プラスイコール演算子(`+=`)を使う・joinメソッドを使う(文字列のリストから結合)...JavaScriptJavaScriptのundefinedとは?判定やnullと違いなどJavaScriptのundefinedについてまとめました。undefinedについて解説した後に、下記のことについて書いています。・undefinedになるパターンについて・undefinedの判定方法・undefinedとnullの違...PythonPythonのrange関数の使い方とサンプル5パターン!Pythonのrange関数の使い方について書いています。その後にrange関数を使って、5パターンのコードを書いて挙動を確認してみました。載せているコードはPythonのバージョン3.10.5で確認しました。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。unmounted)ライフサイクルのサンプルコードの解説LifeCycleコンポーネントを呼び出す親コンポーネント親コンポーネントのサンプルコードの解説ライフサイクルの動作確認Vue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。