Vue.js / watchの使い方

最近Vue.jsを勉強し始めたので、まだ使ったことがないwatchオプションについて調べたのでまとめておきます。

＊参考

Vue.js 公式ドキュメント
[基礎から学ぶ Vue.js （更新後のDOMにアクセス）(https://cr-vue.mio3io.com/guide/chapter4.html#更新後のdomの高さを取得しよう)

＊watch オプション

ウォッチャと呼ばれ、データが変更されたタイミングで処理を実行したいときに使います。（非同期の処理など）
watchオプションのなかで「変更を監視したい変数: function() 」で関数を定義します。定義する変数はdataプロパティと紐付いている必要があります。

watch: {
  list: function() {
    .....
  }
}

＊nextTick

callbackを延期し、DOMの更新後に処理を実行します。
今回作成したプログラムでは、watchオプションの関数のなかで使っていて、nextTickを使わない場合とnextTickを使った場合で値が変わることを確認しています。

$refs
コンポーネントが描画された後に追加されます。

<template>
  <div>
    <button v-on:click="list.push(list.length+1)">追加</button>
    <ul ref="list">
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
   data() {
      return {
        list: []
      }
    },
    watch: {
      list: function() {
        console.log('通常', this.$refs.list.offsetHeight)
        this.$nextTick(function() {
          console.log('nextTick:', this.$refs.list.offsetHeight)
        })
      }
    }
  }
</script>

＊watchの使いどころ

変更されたタイミングで処理を実行するのは changeイベントでも実現できますが、複数のフィールドの値を監視する場合はそれぞれ全てにchangeイベントを登録しなければいけないので非常に面倒です。
こういったときに、複数の値をまとめたformオブジェクトをdataプロパティで定義し、formオブジェクトをwatchすることで複数の値を変更することができます。入力フォームやドロップダウンのフィルターに使うと便利そうです。

＊所感

今回はwatchを使った簡単な動作確認しかしていませんが、今度は入力フォームのフィルターなどといったプログラムを実際に作って確認してみたいと思います。
Vue.jsでは似た処理ができる機能が複数ありますが、それぞれの違いを明確にして使い分けできるようにしていきたいです。

もぐもぐプログラミング

Vue.js / watchの使い方

＊参考

＊watch オプション

＊nextTick

＊watchの使いどころ

＊所感

人気の投稿