Vue で computed を使用して応答データをリッスンし、DOM を更新する方法

Vue は、応答性の高いデータ バインディングとコンポーネントベースの構築を組み合わせてフロントエンド開発を簡素化する人気の JavaScript フレームワークです。 Computed は、Vue の応答性の高いデータを使用する方法であり、依存データに基づいて計算されたプロパティを動的に生成し、データの変換とプレゼンテーションを実現し、中間結果を自動的にキャッシュしてパフォーマンスを向上させることができます。この記事では、computed を使用して応答データをリッスンし、DOM を更新する方法を紹介します。

1. computed の基本的な使用法

Vue では、computed 属性を使用して計算プロパティを定義できます。構文形式は次のとおりです。

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

ここで、propertyName は計算されるプロパティの名前、function() は特定の計算方法です。このメソッドで Vue インスタンスのデータ属性にアクセスし、属性の値を計算できます (例:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

)。この例では、価格と金額に依存する計算属性 totalPrice を定義します。データの値が変更されると、totalPrice の値も動的に更新されます。この計算された属性の値を表示するには、テンプレートで {{totalPrice}} を使用します。DOM を手動で更新する必要はありません。Vue は属性を計算するメソッドを自動的に実行し、対応する DOM 要素を更新します。

2. 計算された依存関係キャッシュ

計算された属性のもう 1 つの重要な機能は、依存関係キャッシュです。これは、計算されたプロパティが依存するリアクティブ データが変更されていない限り、計算されたプロパティは再計算されず、最後の結果を直接返すことを意味します。これにより、不必要な計算が回避され、プログラムの実行効率が向上します。

たとえば、上記の例では、計算されたプロパティ totalPrice を複数回読み取ります。たとえば:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

ご覧のとおり、totalPrice を 2 回読み取ります。ただし、totalPrice は価格または金額が変更された場合にのみ再計算されるため、繰り返しの計算が効果的に回避されます。

3. 計算されたゲッターとセッター

上で紹介した基本的な使用法に加えて、計算されたゲッターとセッターの定義もサポートしています。これは、計算されたプロパティの割り当て中に、データ検証やデータの書式設定などの追加の操作を実行できることを意味します。

computed のゲッターおよびセッターの構文形式は次のとおりです:

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

ここで、propertyName は計算されたプロパティの名前です。計算されたプロパティの値は get 関数で返され、計算されたプロパティの値が set 関数で返されるので、代入演算を実行します。

たとえば、上記の例ではセッターを使用して製品の単価を変更していますが、単価を 0 未満にすることはできません。

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

この例では、アンダースコア接頭辞が付いた _price 応答データを使用して製品の実際の単価を保存し、ゲッター操作とセッター操作を使用して計算された属性として価格を定義します。 setterでは、ユーザーが入力した価格が負の数値であるかどうかを判定し、負の数値である場合はエラーメッセージを出力し、そうでない場合は_priceに代入します。

概要

computed は、Vue でレスポンシブ データを使用する非常に便利な方法であり、依存するレスポンシブ データに基づいて計算されたプロパティを動的に生成し、中間結果を自動的にキャッシュしてパフォーマンスを向上させることができます。計算されたプロパティのゲッターとセッターで、データの書式設定やデータの検証など、さまざまなデータ操作を実行できます。これによりコードが簡素化され、開発効率が向上します。

以上がVue で computed を使用して応答データをリッスンし、DOM を更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。