GW

皆さんお疲れ様です。
最近は暖かくなり、半袖で過ごせる日が増えてきましたね。
暑がりなので、すでに汗だくで過ごしています。（家にはコタツがなぜかまだ出ている）
MonsterというサスペンスアニメをGW中見ていたのですが、おもしろかったです。
おすすめします。

今回はvue.jsの関数オプションであるmethodsと算出プロパティであるcomputedの使い分けについて記述しようと思います。
関数とプロパティではそもそも違うから使い分けも何もないやろと思った方がおられると思いますが、
Vue.jsのcomputedでは計算ができてしまうので、実際にできることととしては関数とほとんど変わらないのです。
なので違いを調べました。

computedとmethodsの大きな違いはキャッシュ機能があるかどうか

computedにはキャッシュ機能がありページをリロードしてもキャッシュした値を表示するため、データが変わらない限りは再計算は行われません。
一方でmethodsにはキャッシュ機能がないため、たとえデータが変わらない場合でもページをリロードする度に新しく実行されることになります。

リアクティブなデータは基本computedにいれる

リアクティブなデータとは、監視され変更され得るデータのことです。
例えば加工・計算された後のデータなどがこれに当てはまります。

<template>
  <div>
    <p>Price: {{ price }}</p>
    <button @click="increasePrice">Increase Price</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basePrice: 10,
      taxRate: 0.1
    }
  },
  methods: {
    increasePrice() {
      this.basePrice += 5
    }
  },
  computed: {
    price() {
      return this.basePrice + (this.basePrice * this.taxRate)
    }
  }
}
</script>

上記の例ではクリックされるたびにincreasePrice()が呼ばれthis.basePriceが更新されます。
this.basePriceが更新された為、price()で再計算され値が更新されます。
メソッドでは値の更新のみを行い、返すのはcomputedのイメージです。

最後に

あまり、vue.jsを触ったことのない方は？？となることがあったと思いますが、使い分けれると便利ですので是非使い分けてみてください。
おしまい