Vue3 の計算関数: 計算プロパティの使用が容易になります。

Vue3 の計算関数: 計算プロパティの便利な使い方

Vue.js は、現在最も人気のある JavaScript フレームワークの 1 つです。 Vue.js は、そのテンプレート構文、データ バインディング、コンポーネント化、その他の機能により、フロントエンド開発でますます広く使用されています。 Vue.js では、計算関数は非常に実用的な機能であり、コードを簡素化し、繰り返しの計算を減らし、コードのパフォーマンスと読みやすさを向上させるのに役立ちます。この記事では、Vue.js 3.x バージョンについて、計算関数の使用方法とその利点を詳しく紹介します。

1. 計算関数の定義と基本的な使用法

計算関数は、Vue.js の非常に実用的な機能で、自動的に値を計算し、それに基づいて結果を返すのに役立ちます。テンプレートで使用される式。メソッドのメソッドとは異なり、計算関数は定義されたメソッドを呼び出すだけでなく、データ属性から直接値を取得することもできます。計算関数は、依存する属性の値が変更された場合にのみ再計算されます。

Vue.js 3.x バージョンでは、計算オブジェクトをコンポーネントに追加することで計算プロパティを定義できます。たとえば、商品の合計価格を計算する必要があるコンポーネントのコードは次のとおりです。

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

上記のコードでは、totalPrice の計算プロパティを含む計算オブジェクトを定義します。テンプレートでは、{{totalPrice}} を直接使用して製品の合計価格を表示できます。このとき、totalPriceは価格と金額の積を自動的に計算し、結果をテンプレートに返します。

2. 計算関数の特徴

1. 計算プロパティはキャッシュされます

Vue.js では、計算関数にはキャッシュ特性があります。これは、計算メソッドが依存するデータが変更されていない場合、計算メソッドは再計算せずにキャッシュされた結果を直接返すことを意味します。これにより、計算の繰り返しが節約され、コードのパフォーマンスが向上します。たとえば、上記のコードを次のように変更できます。

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

上記のコードでは、新しい totalPriceNoCache 計算プロパティを追加しました。計算結果に乱数を干渉させるため、結果は毎回異なります。テンプレートでは、totalPrice は 1 回だけ計算されるのに対し、totalPriceNoCache は毎回再計算されることがわかります。

2. 計算されたプロパティは他のプロパティに依存する可能性があります

計算されたメソッドによって計算された結果は、現在のコンポーネントのデータ プロパティだけでなく、計算されたデータ プロパティにも基づくことがあります。プロパティ、および他のコンポーネントの props プロパティ。 Vue.js はこれらの依存関係を自動的に追跡し、依存関係が変更されると計算されたメソッドの結果を再計算します。

たとえば、他の計算プロパティに基づく例を以下に示します。

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

上記のコードでは、totalPrice、割引、税金という 3 つの計算プロパティを定義します。このうち、totalPrice の計算は、割引と税金という 2 つの計算属性に依存します。

概要

計算関数は Vue.js の非常に実用的な機能で、テンプレートで使用されている式に基づいて値を自動的に計算し、結果を返すのに役立ちます。メソッドのメソッドとは異なり、計算関数は定義されたメソッドを呼び出すだけでなく、データ属性から直接値を取得することもできます。計算関数は、依存する属性の値が変更された場合にのみ再計算されます。 Vue.js 3.x バージョンでは、計算された関数にキャッシュ機能があり、繰り返しの計算を保存してコードのパフォーマンスを向上させることができます。同時に、計算​​されたメソッドの結果は、他のコンポーネントのデータ属性、計算された属性、および props 属性に基づくことができ、Vue.js はこれらの依存関係を自動的に追跡して、コードの可読性と保守性を向上させます。

以上がVue3 の計算関数: 計算プロパティの使用が容易になります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。