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に記述されます。

属性には通常、 getとset 2 つのメソッドがあります。 get属性値を取得し、 set属性値を設定します。 computedのデフォルトはget attribute です。 vm.totalPriceはbooks.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に依存する他の計算プロパティが存在する可能性があります。キャッシュがなければ、必然的にAのgetter複数回実行してしまいます。キャッシュが必要ない場合は、代わりにメソッドを使用します。

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 をよろしくお願いいたします。