著作権についてお問い合わせ【Vue.js】ウォッチャの使い方!サンプルコードも!2018.08.17Vue.jsHOMEITVue.js【Vue.js】ウォッチャの使い方!サンプルコードも!AdvertisementVue.jsのウォッチャ。チャという名前からも大体どういう機能か想像がつきますが、今回はVue.jsにおけるウォッチャについて解説します!■前回の記事はこちらTraveler【Vue.js】算出プロパティの使い方!サンプルコードも!https://traveler0401.com/vue-js-computed/Vue.jsに算出プロパティと言うのがありますよね。分かるようで分からない算出プロパティ。関連記事ウォッチャとはVue.jsにおけるウォッチャとは、特定のデータまたは算出プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行するものです。算出プロパティとは違い、ウォッチャ自体が値を返すことはありません。チャの使い方コンポーネントのwatchオプションに、監視するデータの名前と変化したときに呼び出されるハンドラを定義します。比較が必要なら、第1引数として「新しい値」と、第2引数として「古い値」を受け取れます。オブジェクトのプロパティも監視できる}}})ウォッチャの定義では、次のオプションを任意に設定できます。監視する値が高頻度で変化する場合、非同期通信などのコストの高い処理を呼び出すとパフォーマンスが下がってしまいます。Lodashなどのユーティリティライブラリを利用して、ウォッチャの実行頻度を制御しましょう。valueの変化が終わるのを待つ時間をミリ秒で指定500)}})debounceは、実行から指定ミリ秒が過ぎた場合にコールバックを呼び出すLodashのメソッドです。フォームを監視してAPIからデータを取得しようウォッチャを使用してGitHubからリポジトリ一覧を取得する簡単なアプリケーションを作成してみます。前提として、index.htmlとmain.jsは同階層にあるものとします。response.data.items}.bind(this))}}})まとめ今回はVue.jsにおけるウォッチャ機能について解説しました。僕がVue.jsの勉強をする際に購入した本になります。記事も合わせて読まれています。TravelerVue.jsの使い方を簡単に解説!メリットやサンプルコードも!https://traveler0401.com/vue-js/最近話題のVue.jsですが、全くの初心者にはどういったものなのか分からないですよね。僕もクライアント側は詳しくないので、Vue.jsについて勉強してみました。僕のプロフィー...Traveler【Vue.js】フィルタの使い方!テキストの変換処理に!https://traveler0401.com/vue-js-filters/Vue.jsにおけるフィルタ機能。特定の文字を変換したりする際に有効な機能です。CLIのインストールから、Vueプロジェクトの作成方法を解説していきます。