【Vue】refとcomputed

Vueのrefとcomputedについて

Vue.jsのrefとcomputedは、リアクティブなデータを扱うための重要な機能です。これらを使うことで、データの変更に応じて自動的にUIを更新することができます。以下に、それぞれの機能について初心者向けに解説します。

refとは？

refは、単一の値をリアクティブにするための方法です。リアクティブな値とは、値が変更されたときに自動的にUIが更新される値のことです。

使い方

1. インポート:

   import { ref } from 'vue';
   

2. リアクティブな値の作成:

   const count = ref(0);
   

3. 値の取得と更新:

   console.log(count.value); // 0
   count.value = 1;
   console.log(count.value); // 1
   

例

以下は、refを使ってカウンターを実装する例です。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  }
};
</script>

computedとは？

computedは、他のリアクティブな値に基づいて計算される値を定義するための方法です。計算された値はキャッシュされ、依存する値が変更されたときにのみ再計算されます。

使い方

1. インポート:

   import { computed } from 'vue';
   

2. 計算プロパティの作成:

   const doubleCount = computed(() => count.value * 2);
   

例

以下は、computedを使ってカウンターの2倍の値を表示する例です。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, doubleCount, increment };
  }
};
</script>

まとめ

• ref: 単一の値をリアクティブにするための方法。値が変更されると自動的にUIが更新される。
• computed: 他のリアクティブな値に基づいて計算される値を定義するための方法。計算された値はキャッシュされ、依存する値が変更されたときにのみ再計算される。

これらの機能を使うことで、Vue.jsでの開発がより簡単かつ効率的になります。詳細な情報は、Vue.jsの公式ドキュメントを参照してください。