Vue.jsにおけるwatchプロパティについて

Vue.jsにおけるwatchプロパティについて解説します。

Vue.jsのwatchプロパティとは

watchプロパティは、特定の変数に変更があった場合にあらかじめ定義していた処理を実行するものです。

<div id="calc">
    <div><input v-model="watchPrice" type="tel">円</div>
    {{ price }}
</div>

new Vue({
    el: '#calc',
    data: {
      price: '',
      watchPrice: ''
    },
    watch: {
      watchPrice(value) {
        this.price = this.watchPrice
      }
    }
  })

computedプロパティは必ず返り値を記述していましたが、watchプロパティはこの限りでありません。