ウォッチャー

2024 5/11

2023.08.03 2024.05.11

ウォッチャー(watchオプション)は、特定のデータオブジェクトプロパティが変化した時に処理を実行できるので非同期制御などでよく使用されます。演算プロパティ(computed)やメソッドでも同じ処理ができますが、都度処理を実行してアプリに負荷がかかる場合があります。

例えば、入力値に対してデータリスト候補を表示する場合は、演算プロパティで都度サーバーにデータを取得すると負荷が大きくなってしまいますが、ウォッチャーを使用して入力時に一定時間を空けサーバーにデータを取得すれば処理を軽減する事ができます。

記法

watch: {
　プロパティ名(プロパティ変化後の値, プロパティ変化前の値) {
　　プロパティ変化時の実行処理
　},
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>watchについて</title>
  </head>
  <body>
    <div id="app">
      <p>入力して１秒後に処理実行</p>
      <label>検索:
        <input type="text" v-model="name" />
      </label>
      <p>小文字入力(大文字変換):{{ upperName }}</p>
    </div>

    <!-- lodashをCDNで使用 -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="./js/watch.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      name: "",
      upperName: "",
    };
  },
  created() {
    this.delayFunc = _.debounce(this.getUpperName, 1000);
  },
  watch: {
    name(next, prev) {
      this.delayFunc();
    },
  },
  methods: {
    getUpperName() {
      this.upperName = this.name.toUpperCase();
    },
  },
}).mount("#app");

出力結果

入力して１秒後に処理実行

検索:

小文字入力(大文字変換):{{ upperName }}

ソースコードの説明

created() {
  this.delayFunc = _.debounce(this.getUpperName, 1000);
},

createdフック(データ初期化後)で、遅延してgetUpperNameメソッドを実行する関数をdelayFuncに代入する。

watch: {
  name(next, prev) {
    this.delayFunc();
  },
},

nameプロパティが変更される度にdelayFunc関数を実行する。
※実行して1秒以上空いた時にgetUpperメソッドが実行

methods: {
  getUpperName() {
    this.upperName = this.name.toUpperCase();
  },
},

入力された英文字をtoUpperCaseメソッドですべて大文字に変換して、upperNameに代入する。