Vueの算出プロパティ

他のプロパティに基づいてリアクティブに計算されるプロパティを定義することができます。そのようなプロパティは算出プロパティと呼ばれます。 それらはcomputedオプション内に配置されます。

例を見てみましょう。 プロパティにユーザーの名前と姓が保存されているとします：

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

フルネーム（名前と姓）を含むfullプロパティを作成しましょう：

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

テンプレート内でプロパティの内容を表示してみましょう：

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

算出プロパティはリアクティブに変更されます。つまり、名前または姓を変更すると、fullプロパティも自動的にリアクティブに更新され、画面上ですぐに変更が反映されます。