kazuki.m

Appearance

sumnail

Vue3の算出プロパティ

created at : 2024/08/22

Vue3

Vue の算出プロパティとは？ ​

算出プロパティを使って、データの加工や計算結果を表示できます。

算出プロパティは、算出に使った値が変更されたときのみ再評価されるため、パフォーマンス上のメリットがあります。

算出プロパティの使用例

テキストの入力数を表示

computed : 16

method : 16

false

ソースコードを見る
vue
<template>
  <p>テキストの入力数を表示</p>
  <p>computed : {{ counter }}</p>
  <p>method : {{ counterMethod() }}</p>
  <input type="text" v-model="messsage" placeholder="input text" />

  <!-- 上記に関係ないボタンを押すと、メソッドのみ再評価される -->
  <p>{{ flag }}</p>
  <button @click="flag = !flag">change bool</button>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const messsage = ref("try change text!");
const flag = ref(false);

const counter = computed(() => {
  console.log("computed");
  return messsage.value.length;
});

const counterMethod = () => {
  console.log("method");
  return messsage.value.length;
};
</script>

<style scoped>
input {
  width: 100%;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 8px;
  padding: 8px 16px;
}

button {
  padding: 8px 16px;
  border: 1px solid var(--main-color);
  border-radius: 8px;
  background-color: var(--main-color);
  color: white;
}
</style>

検証ツールの console を確認すると算出プロパティはキャッシュされるため、ボタンを押下時は再評価されないことがわかります。

メソッドも同じ結果を表示しますが、ボタンを押すたび毎回再評価されることがわかります。

算出プロパティを使用すると不要な再評価を回避できます。

注意

算出プロパティは、別の値を変更するような副作用を持つ処理は適していません。

データの加工や計算結果を表示するために使用する方が良さそうです。

もし必要な場合は、ウォッチャーを検討した方が良さそうです。

使用例 ​

フィルタリング ​

算出プロパティを使ったリストのフィルタリングの例です。

フィルタリング

selected: all

  • item1
  • item2
  • item3
  • item4
ソースコードを見る
vue
<template>
  <select v-model="selected">
    <option value="all">全て</option>
    <option value="done">完了</option>
    <option value="not">未完了</option>
  </select>
  <p>selected: {{ selected }}</p>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const selected = ref("all");

const items = [
  { id: 1, text: "item1", done: true },
  { id: 2, text: "item2", done: false },
  { id: 3, text: "item3", done: true },
  { id: 4, text: "item4", done: false },
];

const filteredItems = computed(() => {
  if (selected.value === "all") {
    return items;
  } else if (selected.value === "done") {
    return items.filter((item) => item.done);
  } else {
    return items.filter((item) => !item.done);
  }
});
</script>

<style scoped>
select {
  padding: 8px 16px;
  border: 1px solid var(--main-color);
  border-radius: 8px;
  background-color: var(--bg-color);
}
</style>

True / False の判定 ​

算出プロパティを使った True / False の判定の例です。

True / False の判定

ボタンを押すと、完了/未完了が切り替わります

ソースコードを見る
vue
<template>
  <p>ボタンを押すと、完了/未完了が切り替わります</p>
  <button @click="isDone = !isDone">{{ doneText }}</button>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const isDone = ref(false);

const doneText = computed(() => {
  return isDone.value ? "完了" : "未完了";
});
</script>

<style scoped>
button {
  padding: 8px 16px;
  border: 1px solid var(--main-color);
  border-radius: 8px;
  background-color: var(--main-color);
  color: white;
}
</style>

まとめ ​

Vue3 の算出プロパティについて確認しました。

常に再評価されるメソッドと比較して、算出プロパティはキャッシュによるパフォーマンス向上が期待できます。

参考 ​