【Vue3×TypeScript】 computedプロパティについて

computedプロパティについて

勉強しているのでまとめておく。

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
・
・
省略
・
・
const budget = 50000

const priceLabel = computed(() => {
  if (item1.price > budget * 2) {
    return '高すぎだろ、ふつうにさぁ'
  } else if(item1.price > budget){
    return 'やばすぎ、それは'
  } else {
    return item1.price + ' yen'
  }
})

</script>

template内の記述

<template>
<div class="container">
  <h1>最近の支出だぞーーーーー</h1>
  <input v-model="item1.name" />
  <input v-model="item1.price" />
  <button @click="clear">消すぞ</button>
  <div class="payment">
    <label>{{ item1.name }}</label>
    <label>{{ priceLabel }}</label>   // ここでcomputedの処理を呼び出す
    <a v-bind:href="url1">ここで買いました</a>
    <button @click="buy(item1.name)">購入すんのか？</button>
  </div>
  <div class="payment">
    <label>{{ itemName2 }}</label>
    <label>{{ price2 }} yen</label>
  </div>
</div>
</template>

こんな感じでcomputedプロパティについて記述することがができる。

ちなみに、普通のアロー関数で定義をしても同じような挙動をするが、computedを使用することでキャッシュなどをしてくれてよりはやい動作を見込めるらしい。
詳しいことはわからないので、気になる人はググってください。Vueの公式にも買いてありそう。