計算された属性を使用して Vue でレスポンシブ データを処理する方法

Vue は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。 Vue では、データの応答性の高い更新は Vue の最も強力な機能の 1 つです。 Vue では、データ バインディングは一方向です。つまり、データの変更はインターフェイスに影響しますが、インターフェイス上の操作 (ユーザー入力など) はデータに影響しません。これらのデータ更新は、Vue の計算されたプロパティを通じて自動的に完了します。

計算プロパティは、応答性の高いデータを処理するために Vue で使用されるメソッドであり、その本質は計算プロパティです。 Vue のメソッドと比較して、computed 属性はデータ計算とデータ キャッシュの処理に重点を置いているため、Vue はより効率的にデータを更新できます。この記事ではcomputed属性の使い方と注意点を紹介します。

計算属性の基本的な使用法

Vue で計算属性を宣言する方法は非常に簡単です。例:

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

In のように、計算オブジェクトを Vue インスタンスに追加するだけです。上記のコードでは、Vue インスタンスを宣言し、計算オブジェクトで reversedMessage プロパティを定義します。これは、計算に message プロパティを使用します。 message 属性の値が変更されると、Vue は reversedMessage の計算値を自動的に更新し、それをインターフェイスにレンダリングします。

計算された属性は関数である必要があることに注意してください。この関数はパラメータを受け取ることも、受け取らないこともできます。関数内では、これを使用して Vue インスタンス内のデータにアクセスしますが、変数には直接アクセスしません。

さらに、計算された属性の値はキャッシュされ、依存データが変更された場合にのみ再計算されるため、Vue の効率が大幅に向上します。たとえば、上記の例では、message 属性の値が変更されていない場合、reversedMessage 属性が読み込まれるたびに、キャッシュ内の計算値が直接返され、再計算されません。

計算属性の高度な使用法

計算属性のセッター

計算属性は、データの読み取りに使用できるだけでなく、データの設定にも使用できます。 。計算された属性に定義された set メソッドは、属性に値が割り当てられるときに呼び出されます。例:

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

上の例では、読み取りおよび書き込み可能な fullName 属性を定義しました。 firstName と lastName を組み合わせた文字列を返す get メソッドを定義しました。同時に、パラメータ newVal を受け取り、このパラメータに従って firstName と lastName の値を設定する set メソッドも定義されます。計算された属性のセッター関数は値を返さないことに注意してください。

計算属性の依存関係

計算属性の計算は、依存する属性に基づいて行われます。依存プロパティが変更されると、計算されたプロパティが自動的に再計算されます。 Vue は、依存関係追跡メカニズムを通じて、計算された属性で使用される依存関係を自動的に収集できます。例:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      console.log('computed fullName')
      return this.firstName + ' ' + this.lastName
    },
    reversedName: function () {
      console.log('computed reversedName')
      return this.fullName.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)

上記のコードでは、fullName と reversedName の両方が、firstName と lastName の 2 つのプロパティに依存します。 reversedName プロパティにアクセスすると、Vue は fullName と reversedName の値を自動的に計算し、計算された fullName と計算された reversedName を出力します。 firstName の値が変更されると、Vue は fullName と reversedName の値を再計算し、計算された fullName と計算された reversedName を出力します。

計算された属性が依存するデータが変更されると、計算された属性のゲッターが非同期的に呼び出されることに注意してください。これは、依存データが変更された場合、Vue は計算されたプロパティの値をすぐには更新せず、次のイベント ループで更新することを意味します。これにより、不必要なパフォーマンスのオーバーヘッドが回避されます。

計算プロパティと監視プロパティの違い

計算プロパティに加えて、Vue は応答性の高いデータを処理する別の方法である監視プロパティも提供します。これらはすべてリアクティブ データを処理する機能を備えていますが、その実装方法が異なります。

監視属性はリスナーであり、データが変更されると、監視属性は即座に応答関数を実行し、データを処理するという副作用があります。例:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上の例では、データの変更をリッスンし、firstName または lastName が変更されたときに fullName 属性の値を更新するために watch 属性を定義しました。 watch 属性の処理関数は、データが変化するとすぐに実行されることに注意してください。

computed 属性と watch 属性の最大の違いは、その実装と使用シナリオにあります。 computed 属性は、データ計算やキャッシュなどの反復的な操作の処理により適しており、Vue の効率を大幅に向上させることができます。 watch 属性は、データ変更時のアニメーション効果のトリガーやリクエストやその他の副作用操作の送信など、データ変更の監視に適しています。

結論

Vue では、計算属性は、リアクティブ データを処理するために最も一般的に使用されるメソッドの 1 つです。 computed 属性により、データをより簡潔かつ効率的に処理できるようになり、計算の繰り返しが回避され、Vue のパフォーマンスも向上します。計算属性を使用する場合は、setter関数、依存関係、計算属性内の計算属性と監視属性の違いに注意する必要があります。

以上が計算された属性を使用して Vue でレスポンシブ データを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。