ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。