Vue/Nuxt.jsのcomputedで引数を取れる？意味ないかも

初心者さん

Vue/Nuxt.jsのcomputedって引数を取れるのかな？

このような疑問をお持ちの方に向けて書いています。

結論から言うと、引数をとることは可能ですが使い道があるのか疑問に感じました。

▼この記事では、以下の点を理解できます。

Vue/Nuxt.jsでcomputedってよく使いますよね。パフォーマンスを考えるとcomputedで書けるなら書きたいと思うのではないでしょうか。

この記事では、引数ありのcomputedを深堀りしました。Vue/Nuxt.jsに興味がある人は最後までご覧ください。

Vue/Nuxt.jsのcomputedのメリット

まずはcomputedをざっくりおさらいしていきます。

computedとは

算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。
引用元: Vue.js公式

簡単に言うと、値に変化がない場合は呼ばれないということ。

computedのメリットがわかるサンプルコード

ボタンをクリックするとdataのnumの値を+2していくだけのサンプルコードです。

<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample1: {{ sample1 }}</p>
    <p>sample2: {{ sample2 }}</p>
    <p><button @click="countUp()">COUNT UP</button></p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample1() {
      console.log('sample1 - numを返す')
      return this.num
    },
    sample2() {
      console.log('sample2 - computed文字列を返す')
      return 'computedで文字列を返すだけ'
    }
  },
  methods: {
    countUp() {
      console.log('---------------------')
      console.log('ボタンをクリックしました')
      console.log('---------------------')
      console.log('countUp')
      this.num += 2
    }
  }
}
</script>

consoleの結果は

ボタンをクリックしてnumの値が変化すると、sample1の方はconsoleを見ると再計算されているのがわかります。

sample2は、numの値が変化しても影響を受けないため、呼ばれていないのがわかります。

では、この後computedに引数を渡すコードを書いていきます。

Vue/Nuxt.jsのcomputedでは引数を受け取れるのか

冒頭で書いた通り引数を受け取ることは可能です。サンプルコードを元に解説していきます。

computedで引数を取る書き方は2つあります。

アロー関数で書く - computedで引数を取る方法

<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample3: {{ sample3(3) }}</p>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を２倍にして返す')
        return arg * 2
      }
    }
  }
}
</script>

computedもアロー関数を使って引数を受け取ることができます。

アロー関数なので引数は、argです。一行で書くこともできます。そうすると引数の(...)を省略できたり、returnも省略できる、{...}も省略できます。

スッキリ書くことはできますね。

    sample3() {
      return arg => arg * 2
    }

無名関数を返す - computedで引数を取る方法

Vue/Nuxt.jsのcomputedで引数を取るには、無名関数で書く方法があります。

<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample4: {{ sample4(3) }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample4: function() {
      return function(arg) {
        console.log('sample4 - 引数を２倍にして返す')
        return arg * 2
      }
    },
  }

上記のような書き方で引数を受け取り処理することができます。

Vue/Nuxt.jsでcomputedで引数を取るのはあり？

結論から書くと、書いてもパフォーマンスアップにはつながらないのでは？というのが僕の意見です。理由をサンプルコードで解説します。

computedとmethodで同じことができる

computedで引数を取ることはできることがわかりましたが、methodで同じ事ができますね。

<template>
  <div>
    <p>sample3: {{ sample3(3) }}</p>
    <p>sample5: {{ sample5(3) }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を２倍にして返す')
        return arg * 2
      }
    }
  },
  methods: {
    sample5(arg) {
      console.log('sample5 - 引数を2倍にして返す')
      return arg * 2
    }
  }
}

sample3はcomputedで書いた例。

sample5はmethodsで書いた例。少し書き方は違うけど出力した値は一緒です。画面の表示は以下の通り。

computedで書くとパフォーマンスアップにつながる？

methodsでかけることをcomputedで書きたいと考えるのは、冒頭で述べたように「computedは値がかわらなければ、呼ばれないためパフォーマンスアップにつながる」という理由が大きいと思います。

では、引数がある場合、methodで書くよりcomputedで引数を取った方がいいのかという疑問について検証していきます。

このサンプルコードにはボタンが設置されており、クリックするとdataのnumを+2していくというものです。

numの値が変化した時にcomputed, methodsでどのような動きをするのか確認してみます。変化する値、numを使っているのはsample1のみです。

<template>
  <div>
    <h2>computed（引数あり）のパフォーマンスを調べる</h2>
    <p>sample1: {{ sample1 }}</p>
    <p>sample2: {{ sample2 }}</p>
    <p>sample3: {{ sample3(3) }}</p>
    <p>sample5: {{ sample5(3) }}</p>
    <p><button @click="countUp()">COUNT UP</button></p>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample1() {
      console.log('sample1 - numを返す')
      return this.num
    },
    sample2() {
      console.log('sample2 - computed文字列を返す')
      return 'computedで文字列を返すだけ'
    },
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を２倍にして返す')
        return arg * 2
      }
    }
  },
  methods: {
    sample5(arg) {
      console.log('sample5 - 引数を2倍にして返す')
      return arg * 2
    },
    countUp() {
      console.log('---------------------')
      console.log('ボタンをクリックしました')
      console.log('---------------------')
      this.num += 2
    }
  }
}
</script>

ボタンをクリックした結果

ボタンをクリックすると、以下のような結果になりました。

引数ありのcomputedとmethodsは同じ

methodsのsample5は、numと依存関係がないわけですが、methodsなので再描画される仕様です。

けれどもcomputedのsample3は、numと依存関係がないのに再描画されています。キャッシュがきいていないということがわかります。

アロー関数でシンプルに書きたい、イベント以外はcomputedにまとめたいなどの理由があればそれはありだと思います。パフォーマンスを考えてというのであれば？？という結果でした。

まとめ

今回は、computedで引数を受け取ることは可能かという疑問に答える内容でした。

引数を受け取るのは可能ですが、キャッシュがきかないためcomputed本来のメリットが消えてしまうということ。

今回は以上になります。