Vue ドキュメントの計算プロパティ関数の詳細な説明

Vue.js は、開発を容易にする多くの機能とコンポーネントを提供する人気のあるフロントエンド フレームワークです。非常に重要な機能の 1 つは、計算されたプロパティ関数です。計算された属性は、データに基づいて新しい属性値を動的に計算できるため、テンプレート内の複雑な式を直接計算する必要がなくなります。この記事では、Vue ドキュメントで計算されるプロパティ関数を詳しく紹介します。

1. 計算プロパティの定義と使用法

計算プロパティは Vue の特別なプロパティであり、その値は関数です。 Vue インスタンス オブジェクトで計算プロパティを定義する例:

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

上記のコードでは、計算プロパティ reversedMessage が Vue インスタンス オブジェクトで定義されており、その値は次の関数です。 returns は反転されたメッセージです。

計算されたプロパティは、データ プロパティと同様にテンプレートで使用できます。例:

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

レンダリング時、「元のメッセージ:」と「反転メッセージ:」にはそれぞれ「Hello World」が表示されます。 「dlrow olleH」。

2. 計算された属性のキャッシュ

計算された属性には、同じ入力に対して同じ出力を返すという非常に重要な機能があるため、キャッシュされます。たとえば、上記の例では、reversedMessage を複数回使用すると、message が変更されない限り、同じ文字列が返されます。

この機能は、テンプレート内で複雑な式を繰り返し計算する必要がないため、テンプレート内で計算されたプロパティを使用する場合に非常に便利です。

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

計算プロパティではゲッター関数が必要で、計算プロパティの出力値を定義します。場合によっては、計算されたプロパティの入力値を定義するセッター関数の追加が必要になることがあります。

たとえば、計算プロパティ fullName を定義できます。このプロパティのゲッターは firstName と lastName を連結した文字列を返し、セッターは次のことを行うことができます。 fullName の内容を firstName と lastName に分割します。

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

上記のコードでは、fullName のゲッターを使用して現在のフルネームを取得するか、セッターを使用して新しいフルネームを設定できます。例:

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

4. 計算属性のリアルタイム計算

計算属性は、データ属性のリアルタイム計算に最適な方法です。 Vue はデータ属性を変更すると、次回テンプレートをレンダリングする必要があるときに、新しい計算属性の値を計算します。計算されたプロパティが依存するデータが変更されていない場合、計算されたプロパティは以前にキャッシュされた値を使用します。

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

上記のコードでは、計算されたプロパティ diameter と circumference を定義します。これらは両方とも radius プロパティに依存します。これらの計算されたプロパティは、radius プロパティが変更されると再計算されます。例:

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

5. 計算されたプロパティとメソッドの違い

Vue にはメソッドと呼ばれる非常によく似た概念があり、このメソッドはテンプレートで使用できます v-on 呼び出すディレクティブ。メソッドと計算されたプロパティはどちらも、データ プロパティの変更に基づいて値を変更できます。

それでは、メソッドと計算プロパティの違いは何でしょうか?

まず第一に、計算プロパティとは異なり、メソッドは常に再計算され、その結果は計算プロパティのようにキャッシュできません。通常、メソッドは、毎回再計算する必要がある複雑なロジックや、特定のパラメーターを渡す必要があるロジックに適しています。

第 2 に、計算プロパティにはゲッターのみがあり、メソッドにはセッターのみがあります。メソッドは値を返すことができますが、戻り値はキャッシュされません。

最後に、計算プロパティはデータ プロパティと同じように簡単にテンプレートで使用できますが、メソッドは v-on ディレクティブを使用して呼び出す必要があります。計算されたプロパティの値をテンプレートに表示する場合は、計算されたプロパティを使用することをお勧めします。

6. 概要

Vue では、計算されたプロパティは、データ プロパティをリアルタイムで計算する最良の方法です。キャッシュ特性があり、計算の繰り返しを回避し、複雑なビジネス ロジックを実装でき、コードの可読性と保守性が向上します。同時に計算プロパティではゲッター関数やセッター関数も提供できるため、計算プロパティを自由に操作できるようになります。計算されるプロパティとは異なり、メソッドは常に再計算されるため、毎回再計算する必要があるロジックやパラメーターを渡す必要があるロジックに適しています。頻繁に計算を必要とするロジックの場合は、計算されたプロパティを使用することをお勧めします。

以上がVue ドキュメントの計算プロパティ関数の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。