【Nuxt.js】Nuxt文法編：computed

前置き

今回はcomputed🌟
getter関数とsetter関数が使える
算出プロパティです！

簡単な使い方や
methodsとの違いを解説しています🙋‍♀️

computed

簡単な使い方

テキストを反転させます🎈

コード

) pages

プロパティなので呼び出す際は
{{ reversedMessage() }}
ではなく
{{ reversedMessage }}
でOKです🌟

<template>
  <div class="page">
    <p>message: {{ message }}</p>
    <p>reversed message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Nuxt.js!',
    }
  },
  computed: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    },
  },
}
</script>

<p>message: {{ message }}</p>

<p>reversed message: {{ reversedMessage }}</p>

</div>

</template>

export default {

data () {

return {

message: 'Hello Nuxt.js!',

}

computed: {

reversedMessage () {

return this.message.split('').reverse().join('')

}

</script>

methodsを使った場合のコード

呼び出す物が関数になるので
{{ reversedMessage() }}

<template>
  <div class="page">
    <p>message: {{ message }}</p>
    <p>reversed message: {{ reversedMessage() }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Nuxt.js!',
    }
  },
  methods: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    },
  },
}
</script>

<p>message: {{ message }}</p>

<p>reversed message: {{ reversedMessage() }}</p>

</div>

</template>

export default {

data () {

return {

message: 'Hello Nuxt.js!',

}

methods: {

reversedMessage () {

return this.message.split('').reverse().join('')

}

</script>

thisコンテキストを使う

thisコンテキストが使えます。
this.messageを平仮名にしてみます。

コード

) pages

<template>
  <div class="page">
    <p>message: {{ message }}</p>
    <p>reversed message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Nuxt.js!',
    }
  },
  computed: {
    reversedMessage () {
      let message = this.message = 'あいうえお'
      return message.split('').reverse().join('')
    },
  },
}
</script>

<p>message: {{ message }}</p>

<p>reversed message: {{ reversedMessage }}</p>

</div>

</template>

export default {

data () {

return {

message: 'Hello Nuxt.js!',

}

computed: {

reversedMessage () {

let message = this.message = 'あいうえお'

return message.split('').reverse().join('')

}

</script>

methodsとの違い

computedはプロパティ
methodsはメソッドなので
そもそも土台が違うのですが
似ていますよね👭

キャッシュするかどうか

大きな違いはキャッシュです❣️
computed：キャッシュされる
methods：キャッシュされない

キャッシュ
保存すること💾
リロードするとキャッシュは消えるので
リロードをせずに繰り返し使う場合の話です🌟

算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。
算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。これはつまり、message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。
https://jp.vuejs.org/v2/guide/computed.html

computed

再度関数を呼び出してもキャッシュを返すので
高速にさばくことができます👍✨

依存しているものに変更がない限りは
再計算するのは依存データが変わった時だけです。
Vueインスタンス外のDate.now()などは
変更の検知ができないので再計算されません。

また、getterもsetterも使えます。

methods

再計算して最新のものを返します。
getterは使えますがsetterは使えません。

具体例

例えばリアルタイムな日時🕰
liで並べてみると
本来なら0.1秒とか僅かにズレるはずですが…

computedなら
キャッシュされた日時を返すので全て同じになります💡

methodsなら僅かなズレも返します。

ポイント

Date.now()はVueインスタンス外のデータです。
依存データ(リアルタイムな日時)は
常に変更しているので
computedでも再計算できそうですが
Vueインスタンス外なので
変更の検知ができないのです😲

getterとsetter

computedではこの両方が使えます💃 🎀

取得と書き込み

getter: 取得
取得した値を返すので必ずreturnを書きます✍️

setter: 書き込み

サンプル

doubleで入力した値に基づいて
oneの値が変わります🌟

コード

) pages

算出プロパティcomputedについて[setter][Vue.js]

<template>
  <div class="page">
    <p>one</p>
    <input type="number" v-model="one">
    <p>double</p>
    <input type="number" v-model="double">
  </div>
</template>

<script>
export default {
  data () {
    return {
      one: 1,
    }
  },
  computed: {
    double: {
      get () {
        return this.one * 2
      },
      set (double) {
        this.one = double / 2
      },
    }
  },
}
</script>

<p>double</p>

</div>

</template>

export default {

data () {

return {

one: 1,

}

computed: {

double: {

get () {

return this.one * 2

set (double) {

this.one = double / 2

}

</script>

まとめ

computedはプロパティ
依存データが更新され、それが検知できる場合のみ再計算する
getterとsetterの両方が使える

computedを使って
クラスバインディングをする実践編もあるので
チャレンジしてみてください✨💪

【Nuxt.js】props実践編：switchボタンを作ろう！