Vue.jsウォッチャー

Vueウォッチャーを使用すると、コンポーネントデータをリッスンし、特定のプロパティが変更されるたびに実行できます

ウォッチャーは、コンポーネント状態の1つのプロパティをスパイし、そのプロパティ値が変更されたときに関数を実行できるようにする特別なVue.js機能です。

これが例です。名前を表示するコンポーネントがあり、ボタンをクリックして名前を変更できます。

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
methods: {
changeName: function() {
this.name = ‘Flavius’
}
}
}
</script>

名前が変わったら、コンソールログを印刷するなどの操作を行います。

に追加することでそうすることができますwatch監視するデータプロパティという名前のプロパティをオブジェクト化します。

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

に割り当てられた機能watch.nameオプションで2つのパラメータを受け入れることができます。 1つ目は、新しいプロパティ値です。 2番目は古いプロパティ値です：

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

計算されたプロパティの場合とは異なり、ウォッチャーをテンプレートから検索することはできません。

私の無料ダウンロードVueハンドブック

Vue.jsウォッチャー

Vueウォッチャーを使用すると、コンポーネントデータをリッスンし、特定のプロパティが変更されるたびに実行できます

その他のvueチュートリアル：