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 の概念と使用法の説明

推薦する

mysql5.7.21.zip インストールチュートリアル

mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...

Vue 学習 - VueRouter ルーティングの基礎

目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします

v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...

HiveメタデータをMySQLに設定するプロセス全体

Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...

MySQL でスロークエリログを有効にする方法

1.1 はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメ...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

MySQL 5.7.16 ZIP パッケージのインストールと設定のチュートリアル

この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

iframeノードの初期化の問題に関する議論

今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

JavaScript と JQuery フレームワークの基本チュートリアル

目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...

計算機機能を実装するミニプログラム

この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...