Vue.JS入門編--計算属性

Vue.jsのインライン式は便利ですが、シーンを使用するのに最適なのは簡単なブール操作や文字列接合です.より複雑な論理に関連する場合は、計算プロパティを使用します.
計算プロパティは、式の記述を宣言するために使用される値が他の値に依存します.テンプレートにデータを計算属性にバインドすると、Vueはその依存する任意の値が計算属性を変更したときにDOMを更新します.この機能は非常に強力で、コードをより宣言し、データ駆動し、メンテナンスを容易にすることができます.
通常、計算プロパティを使用すると、プロシージャ式の$watchコールバックを使用するよりも適切です.たとえば、次の例です.

{{fullName}}

var vm = new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

上のコードはプロセス式で、重いです.計算属性のバージョンを比較します.

    var vm = new Vue({
        el:'#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })

気分がよくなりましたか?また、計算プロパティにsetterを指定することもできます.

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]
    }
  }
}

計算プロパティキャッシュは0.12.8まで行われ、計算プロパティは値を取る動作としてのみ表示されます.getterはアクセスするたびに値を再求めます.0.12.8で改善されました.計算プロパティの値はキャッシュされ、反応依存の変化がある場合にのみ再計算されます.
大きな配列をループし、多くの演算を完了する必要があるオーバーヘッドの大きい計算属性Aがあることを想定します.また,Aに依存する計算属性もある.キャッシュがない場合、Aのgetterを不要に過度に呼び出すと、潜在的なパフォーマンスの問題が発生します.キャッシュがあれば、依存性が変化しない限り、Aの値はキャッシュされます.これにより、何度アクセスしても不要な演算が大量に発生しません.
しかし、私たちは何が「反応的依存」と見なされるかを理解しなければならない.

var vm = new Vue({
  data: {
    msg: 'hi'
  },
  computed: {
    example: {
      return Date.now() + this.msg
    }
  }
})

上記の例では、計算属性はvm.msgに依存する.これはVueインスタンスで観察されるデータ属性であるため、反応式依存と見なされる.vm.msgが変更されると、vm.exampleの値が再計算されます.しかし,Date.now()はVueのデータ観測システムとは何の関係もないので,反応式依存ではない.したがって、プログラムでvm.exampleにアクセスすると、vm.msgが再計算をトリガーしない限り、タイムスタンプは常に同じ値であることがわかります.
簡単にデータを取得するモードを維持する必要がある場合があります.vm.exampleにアクセスするたびに再計算をトリガーしたいと思っています.0.12.11から、特別な計算プロパティスイッチのキャッシュをサポートできます.

computed: {
  example: {
    cache: false,
    get: function () {
      return Date.now() + this.msg
    }
  }
}

これで、vm.exampleにアクセスするたびに、タイムスタンプが更新されます.ただし、JavaScriptプログラム内でのみアクセスされる場合、データバインドはドライバに依存することに注意してください.テンプレートに{{example}}の計算プロパティをバインドすると、DOMは反応依存が変化したときにのみ更新されます.