[Vue] 2. computed & watch

テンプレートに演算を入れすぎると、コードが複雑になり、以降のメンテナンスも難しくなります.この問題を解決するために、computedおよびwatchの属性が存在する.
どのような特性が異なるかを理解してください.
computed

依存性およびバインド

による依存オブジェクト格納

計算対象データの定義=>宣言プログラミング

ではなく、メソッドと同じ関数を定義することもできますが、計算プロパティは依存オブジェクトに基づいて格納されます.つまり、キャッシュしたくない場合は、使用方法がより効果的である可能性があります.

watch

名前の通り、監視者役

監視するデータを指定し、データ変更時にこの関数=?コマンドプログラミング

単純コード比較

<div id="demo">{{ fullName }}</div>

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

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

ほとんどの場合、計算プロパティは適切ですが、ユーザーが作成したモニタが必要になる場合があります.
データの変更に応答するには、非同期または時間のかかる操作を実行する必要があります.
vuejs.orgguid-watchプロパティ