vue calculado implementar os princípios e contraste relógio

princípio

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

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

calculado essencialmente assinantes uma avaliação preguiçosa. Observer atributo de dados de suspensão _datano atributo e o atributo calculado pendurado _computedWatchersabaixo. O editor Dep armazenado nos dois assinantes, enquanto os assinantes e computados relacionados, na verdade, apenas uma coisa, sujo marcada é verdade, então a verdadeira computação enquanto espera get.

Interno calculado implementa um observador inerte, é _computedWatchers, _computedWatchers não avaliado imediatamente, enquanto mantém uma instância dep.

Se ele precisa ser reavaliado pelo cálculo interno atributo bandeira this.dirty atributo

Mudança processo é o seguinte:

1. Quando o estado calculado dependente alterados, notifica o observador inerte.
2. observador computadorizada por this.dep.subs.length juiz não tem assinantes,
   1. Sim, ele vai recalcular, e então comparar os antigos e novos valores, se mudou, vai voltar a render. (Vue quer certificar-se não apenas contar com o cálculo das alterações de valor de propriedade, mas no cálculo das propriedades das alterações finais valor calculado irá desencadear tornando re-observador de renderização, é essencialmente uma otimização.)
   2. Se não, basta colocar this.dirty = true. (Ao calcular as propriedades dependem de outros dados, a propriedade não será recalculado de imediato, depois de apenas necessidade de ler o resto da propriedade quando ele realmente vai calcular que, com recurso preguiçoso (computação preguiçoso).)

Assistir

Isto é calculado uma estrutura observador observador. necessidade preguiçosa única para calcular a atualização é verdadeiros representantes getter, atenção cb apenas uma função vazia, o que não é feito, mas a expressão tem valor

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
}

Esta é uma estrutura observador relógio, prestar atenção quando o usuário é verdadeiro, expressão que não há conteúdo crítico, mas há cb, o valor atualizado é determinado quando o usuário é verdadeiro, o cb chamada obter o novo valor.

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
}

Qual é a diferença e relógio

Cálculo calculado propriedades: confiar em outros valores de atributos, os valores são calculados e armazenados em cache, depende apenas alterações de valor atributo, apenas uma transação calculado valor recalculado do valor calculado.

assistir ouvintes: mais de um "observar" o papel de não-cache, semelhante a alguns dos callback monitor de dados, a chamada de retorno será executado sempre que os dados muda quando escuta prosseguir.

E assistir o uso de cena contraste

Quando você precisa realizar alterações de dados assíncrono ou quando o custo de uma operação maior, deve usar o relógio, use a opção relógio nos permite realizar operações assíncronas (acesso a uma API), limitamos a frequência de execução da operação e, antes de obter o conjunto de resultado final estado intermediário. Estes atributos são calculados não pode ser feito.

Quando precisamos para calcular o valor, e dependendo de outros dados, calculados devem ser usados, pois eles podem utilizar as propriedades de cache computadorizada, evitando todos os valores de aquisição, recalculado.