Vue.jsのウォッチャ【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのウォッチャについて、簡単に解説していきます。

ウォッチャとは

ウォッチャは監視プロパティとも言います。

これはデータの状態に変更があった際に任意の処理を実行するものです。

多くの場合で算術プロパティを使う方が適切ですが、非同期の処理等ではウォッチャの方が便利とされています。

ウォッチャの例

ウォッチャの例を挙げます。

<div id="app">{{ fullName }}</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    firstName: '太郎',
    lastName: '田中',
    fullName: '田中 太郎'
  },
  watch: {
    firstName: function (val) {
      this.fullName = this.lastName + ' ' + val
    },
    lastName: function (val) {
      this.fullName = val + ' ' + this.firstName
    }
  }
})
</script>

上記のようにfirstNameプロパティとlastNameプロパティにウォッチャを設定し、変わるとfullNameプロパティの値も変えるようにします。

computed: {
  fullName: function () {
    return this.lastName + ' ' + this.firstName
  }
}

ただし、これは上記のように算術プロパティで実装した方がシンプルでわかりやすいため、ウォッチャを利用すべきかはよく考える必要があります。

ウォッチャの解除

ウォッチャの解除はインスタンスメソッドで設定した場合に可能です。

const unwatchFirstName = app.$watch('firstName',function (val) {
    this.fullName = this.lastName + ' ' + val
});
const unwatchLastName = app.$watch('lastName',function (val) {
    this.fullName = val + ' ' + this.firstName
});

上記の例では、インスタンスメソッドで先程のウォッチャの設定をしています。

unwatchFirstName()
unwatchLastName()

インスタンスメソッドで設定しておけば、設定時にコールバックの実行を停止する関数が返されるため、あとからそれを実行することでウォッチャを解除できます。