Vue.js

【Vue.js】mounted以降でウォッチャー(watch)を登録する

2019/11/17

以下のように書くことで、mounted()の中でウォッチャーを登録することができます。

// 単一ファイルコンポーネントの想定

// 第1引数:監視したいデータ名
// 第2引数:コールバック処理
// 第3引数:オプション(省略可能)

export default {
  mounted() {
    // ウォッチャーを登録
    this.$watch('監視したいデータ', function() {
      // データに変更があった場合の処理
    }, {
      immediate: true // オプション
    })
  }
}

watchの処理として、this.$refsなどを使ってDOMにアクセスしたい場合。普通にwatchオプションで登録すると、マウント前に実行されてしまいます。(マウント前だと、DOMを参照できません)

mounted()で登録することで、ちゃんとDOMにアクセスすることができます。