【Ts重構Vue】04-異步渲染

時間 2019-11-21

標籤 Ts重構Vue 異步渲染简体版

原文原文鏈接

如何避免屢次patch，提升性能？

在複雜Vue項目中，可能會同時修改多個響應式屬性，每次屬性修改都會觸發watch.update函數進行從新渲染，性能問題很是嚴峻，如何提升Vue的性能呢？bash

咱們的編碼目標是下面的demo可以成功渲染，而且最終字體顏色爲yellow，renderCout的值爲2。app

let renderCount = 0;
let v = new Vue({
  el: '#app',
  data () {
    return {
      color: "red"
    }
  },
  render (h) {
    console.log('render:', ++renderCount)
    return h('h1', {style: {color: this.color}}, 'hello world!')
  }
})

setTimeout(() => {
  v.color = 'black'
  v.color = 'yellow'
}, 2000)
複製代碼

JS事件循環

JavaScript是單線程的，爲避免單線程阻塞，JS設有異步事件隊列。事件循環主要有2個步驟：dom

添加消息：異步事件會被推入事件隊列等待執行，如setTimeout(fn, 1000)，1秒後fn函數被推入事件隊列。異步
執行消息：當主線程執行完全部同步任務後，接着取出全部微任務執行，再取出宏任務執行，反覆循環執行。函數

異步渲染

回顧上面的demo，咱們同步修改顏色屬性，所以是否能夠將watch.update方法設置爲異步事件，等待全部屬性修改完後再執行渲染函數？post

v.color = 'black'
v.color = 'yellow'
複製代碼

首先咱們修改update方法，執行update方法時調用queueWatcher將實例推入隊列中：性能

class Watch {
  update() {
    queueWatcher(this)
  }
  run() {
    this.getAndInvoke(this.cb)
  }

  private getAndInvoke(cb: Function) {
    let vm: Vue = this.vm
    // let value = this.getter.call(vm, vm)
    let value = this.get()
    if (value !== this.value) {
      if (this.options!.user) {
        cb.call(vm, value, this.value)
      } else {
        cb.call(this.vm)
      }
      this.value = value
    }
  }
}
複製代碼

在模塊內聲明queue隊列，用於存儲待更新的watch實例；聲明hasAddQueue對象保證不重複添加實例。最後調用並調用nextTick方法（等價於fn => setTimeout(fn, 0)）。字體

let queue: ArrayWatch = []
let hasAddQueue: any = {}

function queueWatcher(watch: Watch): void {
  if (!isTruth(hasAddQueue[watch.id])) {
    hasAddQueue[watch.id] = true
    if (!flush) {
      queue.push(watch)
    } else {
      queue.push(watch)
    }

    if (!wait) {
      wait = true
      nextTick(flushQueue)
    }
  }
}
複製代碼

當JS執行完同步任務後，取出flushQueue開始執行。函數從queue隊列中取出watch實例，並調用run方法開始渲染。ui

function flushQueue(): void {
  flush = true

  try {
    for (let i = 0; i < queue.length; ++i) {
      let w: Watch = queue[i]
      hasAddQueue[w.id] = null
      w.run()
    }
  } catch (e) {
    console.log(e)
  }
}
複製代碼