vue computed implement the principles and watch contrast

principle

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

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

computed essentially subscribers a lazy evaluation. Observer data attribute hanging in _datathe attribute, and the attribute computed hanging _computedWatchersbelow. The publisher Dep stored in the two subscribers, while subscribers and computed related, in fact, only one thing, marked dirty is true, then the real computing while waiting get.

Internal computed implements a inert watcher, is _computedWatchers, _computedWatchers not evaluated immediately, while holding a dep instance.

Whether it need to be reevaluated by internal this.dirty attribute flag attribute calculation

Change process is as follows:

1. When the computed state dependent changed, notifies the inert watcher.
2. computed watcher by this.dep.subs.length judge has no subscribers,
   1. Yes, it will recalculate, and then compare the old and new values, if changed, will re-render. (Vue want to make sure not just rely on the calculation of property value changes, but when calculating the properties of the final calculated value changes will trigger re-rendering rendering watcher, is essentially an optimization.)
   2. If not, simply put this.dirty = true. (When calculating the properties depend on other data, the property will not be recalculated immediately, after only need to read the rest of the property when it will really calculate that with lazy (lazy computing) feature.)

watch

This is computed a watcher observer structure. Unique lazy need to calculate the update is true representatives getter, attention cb just an empty function, what is not done, but the expression has value

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
}

This is a watch observer structure, pay attention when user is true, expression there are no critical content, but there cb, the updated value is determined when the user is true, the call cb get the new value.

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
}

What is the difference and watch

Calculation computed properties: rely on other attribute values, the values ​​are computed and cached, it depends only attribute value changes, only one transaction computed recalculated value of the computed value.

watch listeners: more of a "observe" the role of non-cached, similar to some of the data monitor callback, the callback will be executed whenever the data changes when listening proceed.

And watch the use of contrast scene

When you need to perform asynchronous data changes or when the cost of a larger operation, should use the watch, use the watch option allows us to perform asynchronous operations (access to a API), we limit the frequency of execution of the operation, and before we get the final result set Intermediate state. These are computed attribute can not be done.

When we need to calculate the value, and depending on other data, computed should be used, because they can utilize the cache computed properties, avoiding every acquisition value, recalculated.