Vue.jsの算出プロパティ(computed)と監視プロパティ(watch)を理解する

前提知識

Vue.jsの基礎

早速やってみる

今回はProperty.vueといったファイルを作っていきます(vue cliを使用しています)

Property.vue

<template>
  <div>
    <h1>そのままのメッセージ: {{message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "this is message!!"
    }
  }
}
</script>

こんな感じで作成。
ではこの下にこのメッセージの大文字の内容を出したいとします。

そこで登場するのがcomputedです。

computedとは

computedプロパティはデータに何かしらの処理を加えてから実行したい！！
といった時に役に立つプロパティです。
今回で言えばmessageのdataを大文字にしてから表示したい。が条件です。

Property.vue

<template>
  <div>
    <h1>そのままのメッセージ: {{message}}</h1>
    <h1>大文字のメッセージ: {{upperMessage}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "this is message"
    }
  },
  computed: {
    upperMessage() {
      return this.message.toUpperCase();
    }
  }
}
</script>

このようにcomputedプロパティでupperMessage関数を定義する事でmessageを大文字にしたものを表示する事ができます。
thisでvueインスタンスにアクセスできます。

methodsとの違い

methodsじゃダメなの？？
といった疑問が浮かぶかと思います。

Property.vue

<template>
  <div>
    <h1>そのままのメッセージ: {{message}}</h1>
    <h1>大文字のメッセージ: {{upperMessage()}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "this is message"
    }
  },
  methods: {
    upperMessage() {
      return this.message.toUpperCase();
    }
  }
}
</script>

げんにメソッドに書き換えても同じような処理ができます。

computedとmethodsの違い

どちらを使っても同じような結果が返ってくるのですが、決定的な違いは算出プロパティ(computed)を使用すると、
"リアクティブな依存関係にもとづきキャッシュされる"　といった特徴があります。

つまり値が更新された時のみに実行される事になります。
つまりどういったことかと言うとmessageの値が変わらない限りはuppperMassageに何度アクセスしても関数を再び実行する事はなく即時に事前のデータを返せるということです！！！

これがmethodsとcomputedの大きな違いです！！

監視プロパティ(watch)って？？

watchに関しては特定のデータが変わった時に実行したい。そんな時に使用します。
このwatchに関しては非常にcomputedに似ている部分があります。

基本的にはcomputedを使用するものだと思っていただいて大丈夫です。
ただ、computedだけではかばいきれない部分と言うものがあります。
その部分を補ってくれるのがwatchなのです！

今回はカウントアップの例で見ていきましょう

Property.vue

<template>
  <div>
    <h1>ここからカウントアップします</h1>
    <p>{{counter}}</p>
    <button @click="countUp">カウントアップ</button>
    <p>{{lessThanThree}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    countUp() {
      return this.counter += 1;
    }
  },
  computed: {
    lessThanThree() {
      return this.counter > 3 ? "3より上" : "3以下";
    }
  }
}
</script>

こんな感じに書き換えていきます。
どいった処理かと言うとデフォルトでcounterのdataを0で設定しておきます
カウントアップボタンをクリックすると+１され3より下と3以上を判定しています。

これであればcomputedで問題ないのですが。

<p>{{lessThanThree}}</p>

conputedはこの部分が消えてしまうと処理が描画される事がありません。

watchと言うのは基本的に非同期処理の場合に使います。
computedはreturn を使うのですが、非同期処理では戻り値であるreturnを使う事はできません。

Property.vue

<template>
  <div>
    <h1>ここからカウントアップします</h1>
    <p>{{counter}}</p>
    <button @click="countUp">カウントアップ</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    countUp() {
      return this.counter += 1;
    }
  },
  watch: {
    counter: function() {
      const vm = this;
      setTimeout(function() {
        vm.conter = 0
      }, 3000)
    }
  }
}
</script>

こんな感じに記述するとwatchはcounterを監視するようになります。
この処理で言うと3病後にカウンターを０にしてくれええええといった処理になります。

ちなみにwatchないではthisをそのまま使うことができないため一度定数に代入してから使用しています。

ただ基本はcomputedを使うのがVue.jsのベストプラクティスになります「！

お疲れさまでした！！

参考記事

Vue.js公式ドキュメント
Udemy, 超Vue.js 2 完全パック (Vue Router, Vuex含む)