vue虛擬Dom-render的源碼解析

這篇文章主要介紹“vue虛擬Dom-render的源碼解析”，在日常操作中，相信很多人在vue虛擬Dom-render的源碼解析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue虛擬Dom-render的源碼解析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue 源碼解析 --虛擬Dom-render

instance/index.js
function Vue (options) {
 if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
 ) {
  warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
}
renderMixin(Vue)

初始化先執行了 renderMixin 方法, Vue 實例化執行this._init, 執行this.init方法中有initRender()

renderMixin
installRenderHelpers( 將一些渲染的工具函數放在Vue 原型上)

Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this)
 }

仔細看這個函數， 在Vue中的官方文檔上這樣解釋

Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0)代替。

export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 callbacks.push(() => {
  if (cb) {
   try {
    cb.call(ctx)
   } catch (e) {
    handleError(e, ctx, 'nextTick')
   }
  } else if (_resolve) {
   _resolve(ctx)
  }
 })
 if (!pending) {
  pending = true
  timerFunc()
 }
 // $flow-disable-line
 if (!cb && typeof Promise !== 'undefined') {
  return new Promise(resolve => {
   _resolve = resolve
  })
 }
}

Vue.nextTick用于延遲執行一段代碼，它接受2個參數（回調函數和執行回調函數的上下文環境），如果沒有提供回調函數，那么將返回promise對象。

function flushCallbacks () {
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}

這個flushCallbacks 是執行callbacks里存儲的所有回調函數。

timerFunc 用來觸發執行回調函數

先判斷是否原生支持promise，如果支持，則利用promise來觸發執行回調函數；
否則，如果支持MutationObserver，則實例化一個觀察者對象，觀察文本節點發生變化時，觸發執行 
所有回調函數。

如果都不支持，則利用setTimeout設置延時為0。

const observer = new MutationObserver(flushCallbacks)
 const textNode = document.createTextNode(String(counter))
 observer.observe(textNode, {
  characterData: true
 })
 timerFunc = () => {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
 }
 isUsingMicroTask = true

MutationObserver是一個構造器，接受一個callback參數，用來處理節點變化的回調函數，observe方法中options參數characterData：設置true，表示觀察目標數據的改變

_render函數

通過執行 createElement 方法并返回的是 vnode，它是一個虛擬的 Node。

vnode = render.call(vm._renderProxy, vm.$createElement)

到此，關于“vue虛擬Dom-render的源碼解析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！