Vue3 算出プロパティ

算出プロパティは、他のデータの変化に基づいて動的に導出されるプロパティ値を計算するために使用され、キャッシュ機構も備えており、関連する依存関係が変化した場合にのみ再計算されます。

算出プロパティのキーワード:computed。

算出プロパティは、複雑なロジックを処理する際に非常に役立ちます。

以下の文字列を反転させる例を見てみましょう：

例 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

試してみる »

例 1 ではテンプレートが非常に複雑になり、理解しにくくなっています。

次に、算出プロパティを使用した例を見てみましょう：

例 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue テスト例 - サンプル(example.com)</title> <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> </head> <body> <div id="app"> <p>元の文字列: {{ message }}</p> <p>計算後の反転文字列: {{ reversedMessage }}</p> </div> <script>const app = { data() { return { message: 'サンプル!!' } }, computed: { // 算出プロパティの getter reversedMessage: function () { // `this` は vm インスタンスを指す return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app')</script> </body> </html>

試してみる »

例 2 では、算出プロパティ reversedMessage が宣言されています。

提供された関数は、プロパティ vm.reversedMessage の getter として使用されます。

vm.reversedMessage は vm.message に依存しており、vm.message が変更されると、vm.reversedMessage も更新されます。

computed 関数を使用して算出プロパティを定義します：

例

<template>
  <div>
    <p>商品名：{{ productName }}</p>
    <p>商品価格：{{ formattedPrice }}</p>
    <button @click="increasePrice">価格を上げる</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    // リアクティブデータ
    const state = reactive({
      name: '携帯電話',
      price: 2000
    });

    // 算出プロパティ
    const productName = computed(() => {
      return`割引 ${state.name}`;
    });

    const formattedPrice = computed(() => {
      return `￥${state.price.toFixed(2)}`;
    });

    // メソッド
    const increasePrice = () => {
      state.price += 100;
    };

    return {
      productName,
      formattedPrice,
      increasePrice
    };
  }
};
</script>

説明

computed関数:

  • にsetup関数内で使用computed関数を使用して算出プロパティを定義します。
  • アロー関数を使用して計算された値を返し、この関数は依存するリアクティブデータ（stateオブジェクト内のnameとprice）。

算出プロパティを使用:

  • productName算出プロパティはstate.nameから導出され、state.nameが変化するたびに、productName自動的に更新されます。
  • formattedPrice算出プロパティはstate.priceから導出され、state.priceが変化するたびに、formattedPrice自動的に更新されます。

リアクティブデータ:

  • を使用してreactive関数で作成したstateオブジェクトをリアクティブデータにし、そのプロパティの変化を監視できるようにします。

メソッド:

  • increasePriceメソッドは増加させるために使用され、state.priceの値を、ボタンをクリックするたびに、state.price値が100増加し、formattedPrice算出プロパティもそれに応じて更新されます。

computed vs methods

methods を使用して computed の代わりにすることもできます。効果はどちらも同じですが、computed は依存関係に基づくキャッシュであり、関連する依存関係が変更された場合にのみ再取得されます。一方、methods を使用すると、再レンダリングの際に関数は常に再呼び出しされて実行されます。

例 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

試してみる »

computed を使用する方がパフォーマンスが良いと言えます。ただし、キャッシュしたくない場合は methods プロパティを使用できます。

computed setter

computed プロパティはデフォルトでは getter のみですが、必要に応じて setter を提供することもできます：

例 4

const app = { data() { return { name: 'Google', url: 'http://www.google.com' } }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } } vm = Vue.createApp(app).mount('#app') document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); document.write('<br>------ データを更新 ------<br>'); //setter を呼び出すと、vm.name と vm.url も対応して更新されます vm.site = 'サンプル https://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

試してみる »

例の実行結果から見ると、vm.site = 'サンプル http://www.example.com';を実行すると、setterが呼び出され、vm.nameとvm.urlも対応して更新されます。

その他の拡張