VUE3 の初心者ガイド: レスポンシブ データと計算されたプロパティ

最新のフロントエンド フレームワークでは、応答性の高いデータと計算されたプロパティは非常に重要な概念です。 Vue3 の初心者は、これら 2 つの概念を学習すると、Vue フレームワークの機能と使用法をよりよく理解できるようになります。

この記事では、基本概念、使用法、例など、Vue3 のレスポンシブ データと計算されたプロパティについて説明することに重点を置きます。まだ Vue3 に慣れていない場合は、まず Vue3 の基本を学習してください。

1.レスポンシブ データとは何ですか?

Vue3 では、レスポンシブ データとは、変更を自動的に追跡し、ページを即座に更新できるデータです。 Vue3 では、応答データは通常の JavaScript オブジェクト、プリミティブ データ型、配列などになります。

Vue3 でレスポンシブ データを使用するのは非常に簡単で、データ オブジェクトで対応する属性を定義するだけです。 Vue フレームワークは、これらのプロパティに基づいてデータ バインディングを完了し、応答性の高い機能を実現します。

例:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

上記のコードでは、データ オブジェクトを定義し、その中に属性メッセージを定義します。テンプレートでは、差分式 {{ message }} を使用してこの属性を表示します。 message の値を変更すると、ページ上のコンテンツが自動的に更新されます。

2.計算属性とは何ですか?

Vue3 では、計算プロパティは、他のプロパティ値に基づいて計算されるテンプレートで使用されるプロパティです。計算されたプロパティの値はキャッシュされ、依存するプロパティが変更された場合にのみ再計算されます。

Vue3 での計算プロパティの使用も非常に簡単で、計算オブジェクトに対応するプロパティを定義するだけです。計算オブジェクトの各プロパティは関数であり、計算値を返す必要があります。

例:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

上記のコードでは、firstName と lastName という 2 つのデータ属性を定義します。また、firstName と lastName の値に基づいて新しい値、フルネームを計算する計算属性 fullName も定義します。この時点で、fullName の値はキャッシュされ、firstName または lastName が変更されるまで再計算されません。

3. 応答データと計算プロパティの例

次は、応答データと計算プロパティを使用して単純なショッピング カート機能を実装する方法を示す簡単な例です。

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

上記のコードでは、項目とカートという 2 つの属性を含むデータ オブジェクトを定義します。 items は商品リストを表し、cart はショッピング カートを表します。

また、カート内の各商品の価格と数量に基づいてショッピング カートの合計価格を計算するための計算属性 totalPrice も定義します。

最後に、addToCart と RemoveFromCart という 2 つのメソッドも定義しました。 addToCart は指定された製品をショッピング カートに追加するために使用され、removeFromCart は指定された製品をショッピング カートから削除するために使用されます。

このコンポーネントを使用する場合、親コンポーネントに props を導入して渡すだけで、Vue3 がデータ バインディングとコンポーネントのレンダリングを自動的に完了します。

概要

Vue3 の応答性の高いデータと計算されたプロパティは、Vue3 フレームワークの中核機能の 1 つであり、これらを習得することは Vue3 開発者にとって重要です。

Vue3 では、レスポンシブ データは変更を自動的に追跡し、すぐにページを更新できます。計算属性は、他の属性値に基づいて新しい属性値を計算し、計算結果をキャッシュできます。

簡単なショッピング カートの例を使用して、Vue3 の応答性の高いデータと計算されたプロパティを使用して、高度に動的なインターフェイスを実装する方法を示します。 Vue3 をさらに詳しく学びたい場合は、Vue3 公式ドキュメントやその他の関連記事と合わせて学習してください。

以上がVUE3 の初心者ガイド: レスポンシブ データと計算されたプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。