監視プロパティ

特定のデータまたは、算出プロパティの状態を監視して、変化があった時に登録した処理を自動的に実行する。

事例）検索フォームの値が変わったタイミングで自動的にajax通信を行って結果を一覧表示

Watchメソッドのサンプル

<div id="app">
  <p>
    <input type="text" v-model:value="km">km
  </p>
  <p>
    <input type="text" v-model:value="m">m
  </p>
  <p>
    <input type="text" v-model:value="mm">mm
  </p>
</div>

new Vue({
  el: "#app",
    data: {
    km: 0,
    m: 0,
    mm: 0
  },
  watch: {
    km: function(value) {
        this.km = value
      this.m = value * 1000
      this.mm = value * 1000000
    },
    m: function(value) {
        this.km = value / 1000
      this.m = value 
      this.mm = value * 1000
    },
    mm: function(value) {
        this.km = value / 1000000
      this.m = value / 1000
      this.mm = value 
    }
  }
})