Vue.js の計算プロパティの基礎: 合成 API

計算されたプロパティ

リアクティブなオブジェクトを考えてみましょう:

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

このオブジェクトでは、著者が本を出版したかどうかを示すメッセージを表示したいと考えています。

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

author.books に基づいて計算を実行しました。 テンプレート に表示されるメッセージは、author.books の値によって異なります。この計算はテンプレート内で複数回使用できますが、繰り返し記述したくありません。したがって、計算されたプロパティは、リアクティブ データを含む複雑なロジックに使用する必要があります。

計算されたプロパティの使用例:

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

この例では、publishedBooksMessage という名前の 計算プロパティ を定義しました。 computed() 関数は getter 関数を予期しており、戻り値は 計算された参照 です。計算結果には、publishedBooksMessage.value を使用してアクセスできます。ただし、テンプレートでは、計算された参照は自動的にラップ解除されるため、.value.

計算されたプロパティ は、リアクティブな依存関係を追跡します。 Vue は、publishedBooksMessage の計算が author.books の値に依存することを認識しており、author.books が変更されると、publishedBooksMessage に依存するすべてのコンテキストを更新します。

計算キャッシュとメソッド

次のメソッドを使用しても同じ結果が得られます。

<p>{{ calculateBooksMessage() }}</p>

コンポーネント内:

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

同じ関数を計算されたプロパティの代わりにメソッドとして定義できます。どちらのアプローチでも同じ結果が得られます。ただし、計算されたプロパティはキャッシュされることを強調したいと思います。これは、
を意味します。 計算されたプロパティは、リアクティブな依存関係が変更された場合にのみ再評価されます。 コンポーネントが再レンダリングされるときに author.books の値が変更されていない場合、ゲッター関数を再実行せずに、以前に計算された結果を返します。

なぜキャッシュが必要なのか?

大規模な配列をループして多くの計算を実行する必要がある、コストのかかる計算リストがあるシナリオを考えてみましょう。リストに依存する他の計算プロパティがある場合、キャッシュを使用しないと、リストのゲッターを必要以上に頻繁に実行することになります。

ベストプラクティス

ゲッターは副作用のないものである必要があります。 計算されたゲッター関数は純粋な計算のみを実行し、副作用を回避することが重要です。

たとえば、他の状態を変更したり、非同期リクエストを実行したり、計算されたゲッター内の DOM を変更したりしないでください。計算プロパティは、他の値から値を導出する方法と考えてください。唯一の責任は、その値を計算して返すことです。

結論

Vue.js でリアクティブ データを使用して計算を実行する方法を学びました。アプリケーションの高いパフォーマンスを確保するには、Vue.js のリアクティブ データに基づく操作に計算プロパティを使用する必要があります。

以上がVue.js の計算プロパティの基礎: 合成 APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。