🚀

Vue.js computedプロパティの書き方の違いについて

2024/06/25に公開

Vue.js

tech

既存のソースを読んでいて、computedが色々な書き方で書いてあり、違いがわからなかったため調べて、書き方の違いについてまとめてみました。

記事を読んでわかること

computedプロパティの書き方の種類と違いについて

前提として... computedとは

Vue.js の機能の一つで、特定の値を自動的に計算してくれるプロパティのこと

特徴

キャッシュ機能:

computed プロパティはその依存するデータが変わらない限り、計算結果をキャッシュします。これにより、無駄な再計算を防ぎます。

リアクティブ:

computed プロパティは依存するデータが変更されると自動的に再計算されます。これにより、UI が常に最新の状態を保ちます。

書き方の違いについて

以下、３つのパターンの書き方と違い、使いどころについてまとめました。

returnのみ
get()のみ
get()とset()

1. returnのみ

この書き方は最もシンプルな computed プロパティの定義方法です。読み取り専用のプロパティを作成します。データの取得（get）のみを行い、変更（set）はできません。例えば、this.sample を使って number の値を取得できますが、this.sample に値を設定することはできません。

// returnのみ
sample() {
  return this.$store.state.number;
}

2. get()のみ

この方法も computed プロパティを読み取り専用にするものです。関数として定義する代わりに、オブジェクトとして定義し、その中に get メソッドを含めています。これも sample プロパティを読み取ることができますが、変更することはできません。内部的には 1 の方法と同じですが、構文が異なるだけです。

// get()のみ
sample: {
  get() {
    return this.$store.state.number;
  }
}

1.2パターンの具体的な使い方の例

テンプレートに値を表示する
条件分岐に使用する

<template>
  <div>
    // テンプレートに値を表示する
    <p>{{ sample }}</p>
    // 条件分岐に使用する
    <div v-if="sample > 3">
      <p>{{ text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    sample() {
      return this.$store.state.number;
    }
  },
  data() {
    return {
      text: 'The number is greater than 3!'
    };
  }
};
</script>

3. get()とset()

この方法では get と set の両方を定義し、双方向バインディングを実現します。つまり、sample プロパティを読み取ることも、変更することも可能です。設定（set）時にミューテーションを使って Vuex ストアを更新することもできる。

// get()とset()
sample: {
  get() {
    return this.$store.state.number;
  },
  set(newVal) {
    this.$store.commit('updateNumber', newVal);
  }
}

３パターンの具体的な使い方の例

number.js

// Vuex ストアの例
const store = new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    updateNumber(state, newVal) {
      state.number = newVal;
    }
  }
});

increment.vue

<template>
  <div>
    <p>Number: {{ sample }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    sample: {
      get() {
        return this.$store.state.number;
      },
      set(newVal) {
　　　　　　　　　　　　　　　　　// ②現在の値に1を足した新しい値を設定し、state.number を更新
        this.$store.commit('updateNumber', newVal);
      }
    }
  },
  methods: {
    increment() {
      // ①インクリメント関数発火sampleプロパティ更新
      this.sample = this.sample + 1;
    }
  }
};
</script>

このコンポーネントは以下の動作をします：
sample プロパティは this.$store.state.number の値を表示します。
ボタンをクリックすると、increment メソッドが呼び出され、sample プロパティに現在の値に 1 を足した新しい値を設定します。
これにより、set メソッドが呼び出され、this.$store.commit('updateNumber', newVal); が実行されます。
updateNumber ミューテーションが呼び出され、Vuex ストアの state.number が更新されます。
ストアの number が変更されると、sample プロパティが再計算され、表示が更新されます。

まとめ

return のみ: 読み取り専用の computed プロパティ。簡単で、書き方もシンプル。
get()のみ: 1 と同様に読み取り専用ですが、オブジェクトとして定義されるため構文が少し異なる。
get()とset(): 双方向バインディングを実現。プロパティの読み取りと設定が可能。設定（set）時にミューテーションを使って Vuex ストアを更新することもできる。

感想

１.２の書き方については、可読性やコードの統一性を上げるためプロジェクト全体で書き方を統一した方が良いと思った。