Vue の計算プロパティ

Vue の計算プロパティ

序文:

通常、属性はdata内に配置されますが、一部の属性は論理計算の後に取得する必要がある場合があります。そのため、そのような属性を計算属性に変換できます。

例えば:

<div id="例">
  {{ message.split('').reverse().join('') }}
</div>


この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは、変数messageの逆文字列を表示することであると気づくには、しばらくそれを見る必要があります。この反転された文字列をテンプレート内の複数の場所に含める必要がある場合、処理がさらに難しくなります。

したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。

1. 基本的な例

<div id="アプリ">
  <h2>合計金額: {{totalPrice}}</h2>
</div>
<スクリプト>
  定数vm = 新しいVue({
    el: "#app",
    データ: {
      メッセージ: "こんにちは",
      書籍:
        {名前: 『三国志演義』、価格: 30}、
        {名前:「紅楼夢」、価格:40}、
        {名前:「西遊記」、価格:50}、
        {名前: '水滸伝'、価格: 60}、
      ]、
    },
    計算: {
      // 計算プロパティゲッター
      合計価格: 関数 (){
          結果を 0 にします。
          // `this` は vm インスタンスを参照します for (let book of this.books) {
            結果 += book.price;
          }
          結果を返す
      }
    }
  })
</スクリプト>


結果: 合計金額: 180

ここでは、計算プロパティtotalPriceを宣言します。次に、 for ループを通じて本の合計価格が計算されます。計算する必要のある属性はcomputedに記述されます。

属性には通常、 getset 2 つのメソッドがあります。 get属性値を取得し、 set属性値を設定します。 computedのデフォルトはget attribute です。 vm.totalPricebooks.priceに依存します。本の価格が変わると、計算された属性totalPriceも動的に変更されます。

2. 計算プロパティキャッシュとメソッド

式の中でメソッドを呼び出すことで同じ効果が得られることに気づいたかもしれません。

<div id="アプリ">
  <h2>合計金額: {{getAllPrice()}}</h2>
</div>
<スクリプト>
  定数vm = 新しいVue({
    el: "#app",
    データ: {
      メッセージ: "こんにちは",
      書籍:
        {名前: 『三国志演義』、価格: 30}、
        {名前:「紅楼夢」、価格:40}、
        {名前:「西遊記」、価格:50}、
        {名前: '水滸伝'、価格: 60}、
      ]、
    },
    メソッド: {
      getAllPrice: 関数 () {
        結果を 0 にします。
        // `this` は vm インスタンスを参照します for (let book of this.books) {
          結果 += book.price;
        }
        結果を返す
      }
    },
  })
</スクリプト>

同じ関数を、計算プロパティではなくメソッドとして定義できます。どちらの方法でも最終結果はまったく同じになります。ただし、違いは、計算されたプロパティは、リアクティブな依存関係に基づいてキャッシュされることです。関連するリアクティブ依存関係が変更された場合にのみ再評価されます。つまり、 booksが変更されていない限り、 totalPrice計算プロパティに複数回アクセスすると、関数を再度実行しなくても、以前に計算された結果がすぐに返されます。

計算されたプロパティはキャッシュされる

なぜキャッシュが必要なのでしょうか?巨大な配列を走査し、大量の計算を実行する必要がある、計算コストの高いプロパティAがあるとします。そうすると、 Aに依存する他の計算プロパティが存在する可能性があります。キャッシュがなければ、必然的にAgetter複数回実行してしまいます。キャッシュが必要ない場合は、代わりにメソッドを使用します。

3. 計算プロパティセッター

計算プロパティにはデフォルトではgetterしかありませんが、必要に応じてsetterを提供することもできます。

計算: {
  合計価格:
    取得: 関数 () {
      結果を 0 にします。
      // `this` は vm インスタンスを参照します for (let book of this.books) {
        結果 += book.price;
      }
      結果を返す
    },
    設定: 関数 (newValue) {
      for (let book of this.books){
        本の価格 += 10
      }
    }
  }
}


ここでは、 setメソッドを追加しましたvm.totalPrice=[...]を実行すると、 setterが呼び出され、それに応じて本の合計価格が変更されます。ただし、 set通常は使用されません。

Vue computedプロパティに関するこの記事はこれで終わりです。Vue Vue computedプロパティに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 計算プロパティ実装トランスクリプト
  • Vue の計算プロパティとプロパティリスニングについての簡単な説明
  • Vue の計算プロパティの紹介
  • Vueは計算プロパティを使用して動的スライダーの作成を完了します
  • Vue 監視プロパティと計算プロパティ
  • Vue の計算プロパティとデータ取得方法
  • Vue の計算プロパティをご存知ですか?
  • Vueの計算プロパティ名ケースの3つの実装方法

<<:  CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

>>:  MySQL の Like の概念と使用法の説明

推薦する

vue3 を使用してマテリアル ライブラリを構築する方法

目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...

MySQL ステートメントロックの実装の分析

概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...

HTML でテキストの折り返しを実装する例 (HTML でテキストと画像が混在)

1. 画像の周りのテキスト通常のものを使用する場合、たとえば次のようになります。コードをコピーコー...

CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...

MYSQL ストアドプロシージャと関数の簡単な記述

ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

MySQL における varchar 型と char 型の違い

目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...

海外のウェブページのカラーマッチング事例20選共有

この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...

MySQL でのデータベース間クエリの例

序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...

vue3 コンポーネント通信方法の概要と例

vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...

Node-Redを使用してMySQLデータベースに接続する方法

Node-red をデータベース (mysql) に接続するには、まずコンピューターに MySQL ...

MySQL で 2 つのデータベース テーブル構造を比較する方法

開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...