Nuxt2->Nuxt3移行備忘録 `computed` #Vue.js

computed プロパティは、他のデータプロパティに依存し、その依存プロパティが変更されたときに自動的に再計算されるプロパティを定義するために使用されます。これにより、データの変換やフィルタリング、集計などの複雑な処理を簡潔に実装することができます。

computedを用いたサンプルコード

<template>
  <div>
    <h1>動物園の動物たち</h1>
    <ul>
      <li v-for="animal in filteredAnimals" :key="animal.id">{{ animal.name }}</li>
    </ul>
  </div>
</template>

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

const animals = ref([
  { id: 1, name: 'ライオン', type: '肉食' },
  { id: 2, name: 'ゾウ', type: '草食' },
  { id: 3, name: 'トラ', type: '肉食' },
  { id: 4, name: 'キリン', type: '草食' }
])

const filterType = ref('肉食')

const filteredAnimals = computed(() => {
  return animals.value.filter(animal => animal.type === filterType.value)
})
</script>

日本語での構文(俺向け)

// アロー関数
import { computed } from 'vue'

const 計算された値 = computed(() => {
  const 計算結果 = /* 計算に必要な処理 */
  return 計算結果
})

//　無名関数
import { computed } from 'vue'

const 計算された値 = computed(function () {
  const 計算結果 = /* 計算に必要な処理 */
  return 計算結果
})

computedが用いられる理由

リアクティブなデータの計算:

computedプロパティは、依存するデータが変更されたときにのみ再計算されるため、パフォーマンスが向上します。これにより、無駄な計算を避け、効率的にデータを管理できます。

キャッシュ機能:

computedプロパティはキャッシュされるため、同じ値が必要な場合に再計算を避けられます。これにより、アプリケーションのパフォーマンスがさらに向上します。

コードの可読性と保守性:

computedプロパティを使用すると、テンプレート内のロジックをコンポーネントの外に出すことができ、コードの可読性と保守性が向上します。

Vue3のcomputedと同等の機能を持つVue2のコード

Vue2では、computedプロパティはオブジェクトとして定義されます。以下は、上記のVue3の例をVue2で実装したものです。

<template>
  <div>
    <h1>動物園の動物たち</h1>
    <ul>
      <li v-for="animal in filteredAnimals" :key="animal.id">{{ animal.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animals: [
        { id: 1, name: 'ライオン', type: '肉食' },
        { id: 2, name: 'ゾウ', type: '草食' },
        { id: 3, name: 'トラ', type: '肉食' },
        { id: 4, name: 'キリン', type: '草食' }
      ],
      filterType: '肉食'
    }
  },
  computed: {
    filteredAnimals() {
      return this.animals.filter(animal => animal.type === this.filterType)
    }
  }
}
</script>

computedについての公式ドキュメンテーションのURL

以下のリンクから、Vue3の公式ドキュメンテーションを参照できます:
https://v3.vuejs.org/guide/computed.html

クイズ

1. computedプロパティの主な利点は何ですか？

A. リアクティブなデータのキャッシュ
B. テンプレートのリアクティブデータの直接変更
C. データの永続化
D. サーバーとの通信

2. computedプロパティが再計算されるのはどのタイミングですか？

A. コンポーネントのマウント時
B. 依存するデータが変更されたとき
C. ブラウザのリロード時
D. ユーザーがボタンをクリックしたとき

3. Vue2でcomputedプロパティを定義するには、どのオブジェクトを使用しますか？

A. methods
B. data
C. computed
D. watch

4. Vue3のsetup関数内でcomputedプロパティを作成するには、どのAPIを使用しますか？

A. ref
B. reactive
C. computed
D. watch

5. computedプロパティはどのようにしてパフォーマンスを向上させますか？

A. サーバーリクエストの最適化
B. キャッシュ機能により、無駄な再計算を避ける
C. CSSの最適化
D. ユーザーインターフェースの自動生成

Nuxt2->Nuxt3移行備忘録 `computed`

目次