VUE計算された原則と時計のコントラストを実装

原則

<div id="app">
  {{num}}
  {{num1}}
</div>

var app = new Vue({
  el: '#app',
  data: {
    num: 1
  },
  computed: {
    num1 () {
      return this.num + 1;
    }
  }
});
console.log(app);

基本的に加入者に遅延評価を計算します。オブザーバーのデータ属性にぶら下がっ_data属性、および属性がぶら下がって計算_computedWatchers以下。GETを待っている間に、加入者との関連計算しながら、2人の加入者に保存されている出版社DEPが、実際には、一つだけ、マークされた汚れは、その後、実際のコンピューティング真です。

内部の実装に不活性ウォッチャを計算し、_computedWatchers、DEPのインスタンスを保持しながら、すぐに評価されない_computedWatchersあります。

それは内部this.dirty属性フラグ属性計算によって再評価する必要があるかどうか

次のように変更するプロセスは、次のとおりです。

計算された状態は、従属変更されたとき、不活性ウォッチャに通知します。
this.dep.subs.length裁判官によって計算ウォッチャーは、何の加入者を持っていません
1. はい、それは再計算して、新旧の値を比較し、変更した場合、再レンダリングされますされます。（Vueのは確かにちょうどプロパティ値が変更さの計算に依存しないようにしたいが、再レンダリングレンダリングウォッチャーをトリガする最終計算値の変化の特性を計算する際に、本質的な最適化です。）
2. ない場合は、簡単に言えばthis.dirty = true。（プロパティは、他のデータに依存して計算する場合、プロパティはそれが本当に怠け者（怠惰なコンピューティング）機能を使用しているが計算されますときに、プロパティの残りを読むためにのみ必要後、すぐに再計算されません。）

見る

これは、ウォッチャーオブザーバ構造を計算しています。更新を計算するためのユニークな怠惰な必要性は真の代表ゲッター、注意CBちょうど空の関数は、何が行われていないが、式は値を持っています

Watcher {
    vm: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    deep: false
    user: false
    lazy: true
    sync: false
    before: undefined
    cb: function noop(a, b, c) {}
    id: 1
    active: true
    dirty: false
    deps: (2) [Dep, Dep]
    newDeps: []
    depIds: Set(2) {3, 6}
    newDepIds: Set(0) {}
    expression: "len() {↵        return this.message.length↵      }"
    getter: ƒ len()
    value: 2
    __proto__: Object
}

これは、時計のオブザーバー構造、注意を払うユーザーが真である、表現重大なコンテンツが存在しないが、そこCBで、更新された値は、ユーザが真のとき、呼び出しが新しい値を取得CB決定されます。

Watcher {
    vm: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    deep: false
    user: true
    lazy: false
    sync: false
    before: undefined
    cb: function message() {
        this.full = this.message.join(',');
    }
    id: 2
    active: true
    dirty: false
    deps: (2) [Dep, Dep]
    newDeps: []
    depIds: Set(2) {3, 6}
    newDepIds: Set(0) {}
    expression: "message"
    getter: ƒ (obj)
    value: (2) ["a", "c", __ob__: Observer],
    __proto__: Object
}

違いと時計は何ですか

計算はプロパティを計算する：他の属性値に依存して、値が計算され、キャッシュされ、それが唯一の属性値の変更を依存して、1つのトランザクションのみが計算された値の再計算値を計算します。

時計リスナーがリスニングを続行する場合、データが変更されるたびに、より多くのデータモニタコールバックの一部に似た非キャッシュの役割を、「観察」の、コールバックが実行されます。

そして、コントラストシーンの使用を見ます

あなたは、より大きな作業のコストは、時計を使用する必要がある場合、または非同期データの変更を実行する必要があるとき、私たちは（APIへのアクセス）非同期操作を実行することができます時計のオプションを使用し、我々は、操作の実行頻度を制限し、我々は最終的な結果セットを取得する前に、中間状態。これらの計算された属性は、実行することはできません。

我々は、値を計算する必要がある場合、および計算された他のデータに応じて、彼らはキャッシュが再計算されたすべての取得価額を、避けて、プロパティを計算し利用することができるので、使用すべきです。