2023.01.19 2023.01.31

【Vue3】Composition APIでのcomputedの使い方。

momeq

モー

今回は、算出プロパティであるcomputedについてみていきます。

computedについては、vueにおいてリアクティブなシステムを実現させるための関数の一つです。

使い方としては、通常の関数methodsなどと同じように使うことができますが、キャッシュがある点がmethodsと異なります。

Contents

基本的な使い方
実際のコードで確認
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

モー

基本の使い方は、インポートして、使うだけです。

使う時は、computedの中がリターンを入れた関数になる点に注意ですね。

インポート

import {computed} from “vue”;

宣言

const 変数名 = computed( (): 型 => {
return 返す値
});

実際のコードで確認

ニャー

コードで確認するんだにゃ。

リアクティブに変数が更新される点やmethodsとの書き方、挙動の違いを覚えておくといいんだにゃ。

合計をリアクティブに変更

まずは、合計値をリアクティブに表示するcumputedで確認してみましょう。。

値をラジオボタンから１〜３と１０〜３０を選び、その乗算した値をcomputedで返しています。

まずは、コードを見てなんとなく理解してもらえればと思います。

<script setup lang="ts">
  import {ref, computed} from "vue";
  const number1 = ref<Number>(1);
  const number2 = ref<Number>(10);
  const sum = computed(():Number => {
    return number1.value * number2.value;　//computedを定義
  });
</script>

<template>
  <div class="container"> 
    <div>
      <input type="radio" id="number1" value="1" v-model="number1" />
      <label for="number1">1</label>
      <br>
      <input type="radio" id="number2" value="2" v-model="number1" />
      <label for="number2">2</label>
      <br>
      <input type="radio" id="number3" value="3" v-model="number1" />
      <label for="number3">3</label>
      <br>
      <span>選択: {{number1}}</span>
    </div>
    <br>
    <div>
      <input type="radio" id="number4" value="10" v-model="number2" />
      <label for="number4">10</label>
      <br>
      <input type="radio" id="number5" value="20" v-model="number2" />
      <label for="number5">20</label>
      <br>
      <input type="radio" id="number6" value="30" v-model="number2" />
      <label for="number6">30</label>
      <br>
      <span>選択: {{number2}}</span>
    </div>
    <p>計算結果: {{sum}}</p> //computedによる乗算の結果
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>

参考：refの使い方

computedとmethodsを比較

ここでは、computedとmethodsの同じ値を返す関数を使用しています。

機能自体は同じですが、書き方が違います。

定義の時も異なりますが、使用する際、{{}}の中で、comuputedは名前を書くだけですが、methodsを使う場合、最後に()を書きます。

<script setup lang="ts">
  import {ref, computed} from "vue";
  const number1 = ref<Number>(1);
  const number2 = ref<Number>(10);
  const sum = computed(():Number => {
    return number1.value * number2.value;　//computedを定義
  });
  const sum_m = ():Number => {
    return number1.value * number2.value;　//methodsを定義
  };
</script>

<template>
  <div class="container"> 
    <div>
      <input type="radio" id="number1" value="1" v-model="number1" />
      <label for="number1">1</label>
      <br>
      <input type="radio" id="number2" value="2" v-model="number1" />
      <label for="number2">2</label>
      <br>
      <input type="radio" id="number3" value="3" v-model="number1" />
      <label for="number3">3</label>
      <br>
      <span>選択: {{number1}}</span>
    </div>
    <br>
    <div>
      <input type="radio" id="number4" value="10" v-model="number2" />
      <label for="number4">10</label>
      <br>
      <input type="radio" id="number5" value="20" v-model="number2" />
      <label for="number5">20</label>
      <br>
      <input type="radio" id="number6" value="30" v-model="number2" />
      <label for="number6">30</label>
      <br>
      <span>選択: {{number2}}</span>
    </div>
    <p>計算結果(computed): {{sum}}</p>　　　　// computedの値
    <p>計算結果(methods): {{sum_m()}}</p>   // methodsの値
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>

再レンダリングされない

最後に再レンダリングを確認しましょう。

両方とも、最初に一度関数が動いてから、その後は変数などが変わる再レンダリング時に動きます。

モー

違いは、methodsはどこが再レンダリングされても動くのに対し、computedは自身が関係するところの時だけしか動きません。

下のコードでは、それぞれコンソールに文字を表示するようにしていますが、最初に文字がコンソールに表示され、関係しているラジオボタンを動かすと、両方ともコンソールに文字が表示されます。

一方で、関係のないボタンを押して再レンダリングをオンオフするスイッチを動かすと、methodsは毎回動きますが、computedは動きません。

このため、computedは再レンダリングのコストが低いため、computedで良い場合はcomputedを使うようにしたほうがよさそうです。

<script setup lang="ts">
  import {ref, computed} from "vue";
  const number1 = ref<Number>(1);
  const number2 = ref<Number>(10);
  const sum = computed(():Number => {
    console.log("computed");　　　　　　　//computedが動いたときにコンソールログに表示
    return number1.value * number2.value;
  });
  const sum_m = ():Number => {
    console.log("methods");　　　　　　　//methodsが動いたときにコンソールログに表示
    return number1.value * number2.value;
  };
  const open = ref<Boolean>(true); //定義
  const handleClickAdd = () => open.value = !open.value;
</script>

<template>
  <div class="container"> 
    <div>
      <input type="radio" id="number1" value="1" v-model="number1" />
      <label for="number1">1</label>
      <br>
      <input type="radio" id="number2" value="2" v-model="number1" />
      <label for="number2">2</label>
      <br>
      <input type="radio" id="number3" value="3" v-model="number1" />
      <label for="number3">3</label>
      <br>
      <span>選択: {{number1}}</span>
    </div>
    <br>
    <div>
      <input type="radio" id="number4" value="10" v-model="number2" />
      <label for="number4">10</label>
      <br>
      <input type="radio" id="number5" value="20" v-model="number2" />
      <label for="number5">20</label>
      <br>
      <input type="radio" id="number6" value="30" v-model="number2" />
      <label for="number6">30</label>
      <br>
      <span>選択: {{number2}}</span>
    </div>
    <p>計算結果(computed): {{sum}}</p>
    <p>計算結果(methods): {{sum_m()}}</p>
    <button @click="handleClickAdd">click</button>   //再レンダリングを発生させるボタン
    <p v-if="open">再レンダリング</p>
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>