VUE3 基本チュートリアル: Vue.js 応答性フレームワークを使用して計算

Vue.js は、MVVM (Model-View-ViewModel) パターンを採用したオープンソースの JavaScript フレームワークで、ユーザー インターフェイスを構築するためのシンプルかつ柔軟な方法を提供することを目的としています。その中でも、リアクティブ フレームワークは Vue.js の最も重要な機能の 1 つであり、開発者はデータの双方向バインディングと応答性の高い更新を実行できます。 Vue.js では、計算は重要な概念の 1 つです。この記事ではcomputedの基本的な使い方と例文を紹介します。

1. 何が計算されるのですか?

Computed は、動的に計算されるプロパティの機能を実現できる Vue.js のプロパティです。つまり、computed は、依存するデータに基づいて新しい値を動的に計算でき、依存するデータが変更されると、計算されたプロパティは自動的に更新されます。メソッドとは異なり、computed はメソッドではなく計算されたプロパティです。

2. computed の基本的な使用法

computed 属性は次の方法で定義できます:

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

上記のコードでは、reversedMessage の computed 属性を定義します。メッセージ属性に基づいた計算結果です。

次に、HTML テンプレートで計算された属性を使用します。計算された属性の値を取得するために、メッセージを直接バインドするのではなく、以下に示すように計算された属性を使用します。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

テンプレートでは、差分式 {{ }} を使用できます。計算式の属性の値を表示します。 reversedMessage を計算プロパティとして定義したため、Vue.js は自動的に計算を実行し、ビューを更新します。

3. 計算されたキャッシュ メカニズム

計算された属性が依存するデータが変更されると、計算された属性は自動的に再計算され、ビューが更新されます。ただし、calculated 属性が依存するデータが変更されない場合、computed は最後の計算の結果を記憶し、最後の値を直接返します。このキャッシュ メカニズムにより、アプリケーションのパフォーマンスと効率が向上します。

たとえば、次のコードでは、計算された属性 fullName を定義します。

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

初めて fullName にアクセスすると、コンソールは「計算された」メッセージを出力します。ただし、firstName 属性または lastName 属性の値を変更すると、computed は毎回再計算されず、最後の計算の結果を直接返します。

4. 計算された属性とメソッドの違い

計算された属性とメソッドの両方を使用して、属性を動的に計算する機能を実装できます。主な違いは、計算された属性のキャッシュ メカニズムにあります。

この例では、計算されたプロパティ fullName とメソッド getFullName を定義します:

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

テンプレートでは、次の方法で fullName と getFullName を呼び出すことができます:

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

getFullName メソッドを呼び出すと、キャッシュされた結果を使用せずに毎回再計算されることがわかりました。したがって、メソッドを頻繁に呼び出す必要がある場合は、計算属性を使用すると、アプリケーションのパフォーマンスと効率を向上させることができます。

5. 計算例

次は、ショッピング カートの合計価格を計算する例です。ショッピング カートのデータ構造は次のとおりであると仮定します。 ##テンプレートでは、計算された属性を使用してショッピング カートの合計価格を表示できます:

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

上の例では、すべての商品の価格と数量に応じて計算された属性 totalPrice を定義します。 items 配列内の項目。配列内のアイテムの価格または数量が変更されるたびに、Vue.js は合計価格を再計算し、ビューを自動的に更新します。

6. 概要

Vue.js では、computed は非常に強力で重要な機能であり、動的に計算されるプロパティを実現するための鍵となります。計算されたプロパティのキャッシュ メカニズムにより、アプリケーションのパフォーマンスと効率が向上します。メソッドとは異なり、computed はメソッドではなく計算されたプロパティです。 computed を学習して使用することで、優れた Vue.js アプリケーションをより便利かつ効率的に構築できます。

以上がVUE3 基本チュートリアル: Vue.js 応答性フレームワークを使用して計算の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。