月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

【Vue.js】ウォッチャの使い方!サンプルコードも!

             
  • 2018.08.17
  • IT
【Vue.js】ウォッチャの使い方!サンプルコードも!
Advertisement

 

Vue.jsのウォッチャ

ウォッチャという名前からも大体どういう機能か想像がつきますが、今回はVue.jsにおけるウォッチャについて解説します!

 

 

ウォッチャとは

Vue.jsにおけるウォッチャとは、特定のデータまたは算出プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行するものです。

算出プロパティとは違い、ウォッチャ自体が値を返すことはありません

 

 

ウォッチャの使い方

コンポーネントのwatchオプションに、監視するデータの名前と変化したときに呼び出されるハンドラを定義します。

もし比較が必要なら、第1引数として「新しい値」と、第2引数として「古い値」を受け取れます。

 

ウォッチャの定義では、次のオプションを任意に設定できます。

プロパティ 説明
deep Boolean ネストされたオブジェクトも監視する
immediate Boolean 初期読み込み時にも呼び出す

 

 

Advertisement

 

実行頻度の制御

監視する値が高頻度で変化する場合、非同期通信などのコストの高い処理を呼び出すとパフォーマンスが下がってしまいます。

Lodashなどのユーティリティライブラリを利用して、ウォッチャの実行頻度を制御しましょう。

debounceは、実行から指定ミリ秒が過ぎた場合にコールバックを呼び出すLodashのメソッドです。

 

 

フォームを監視してAPIからデータを取得しよう

ウォッチャを使用してGitHubからリポジトリ一覧を取得する簡単なアプリケーションを作成してみます。

前提として、index.htmlとmain.jsは同階層にあるものとします。


 

 

まとめ

今回はVue.jsにおけるウォッチャ機能について解説しました。

ウォッチャ機能をうまく活用して可読性&保守性の高いコードを書いていきましょう!

ではまた!

 

 

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

 

Travelerを知らないの?