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

Tony 發布于2019-08-26 11:00 / 2155人閱讀

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

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)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106963.html

vue-loader 源碼解析系列之 selector

摘要：當前正在處理的節點，以及該節點的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博筆者系 vue-loader 貢獻者之一（#16）前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請大家首先參考大綱 vue-loader 源碼解析系列之整體分析 selector 做了什么 const path = require(path) co...

miqt 2019-08-21 17:58 評論0 收藏0
Vue源碼解析：AST語法樹轉render函數

摘要：源碼解析這邊解析的是從樹轉換成函數部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個語法樹轉函數的起點是文件中的函數明顯看到，函數傳入參數為語法樹，內部調用函數開始解析根節點容器節點。通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：模版字符串轉AST語法樹 AST語法樹轉r...

trilever 2019-08-02 13:58 評論0 收藏0
Vue源碼解析：AST語法樹轉render函數

摘要：源碼解析這邊解析的是從樹轉換成函數部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個語法樹轉函數的起點是文件中的函數明顯看到，函數傳入參數為語法樹，內部調用函數開始解析根節點容器節點。通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：模版字符串轉AST語法樹 AST語法樹轉r...

Karuru 2019-08-23 14:21 評論0 收藏0
【Vue原理】Compile - 源碼版之 Parse 標簽解析

摘要：當字符串開頭是時，可以匹配匹配尾標簽。從結尾，找到所在位置批量閉合。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Compile - 源碼版之標簽解析...

loostudy 2019-08-26 10:41 評論0 收藏0
[全網最全的 Vue CLI 3 原創合集] 你要的這里都有

摘要：慢慢地，關于的原創學習文章已經寫了多篇了會一直放出來，目前篇，因此做一個合集，獻給那些對新版本腳手架使用和背后設計感興趣的同學，都是一步一步去看源碼，也給官方提了幾次，合進去了幾個原創不易，歡迎大家互相轉發，期望大家一起快速過度到版本目錄慢慢地，關于 Vue CLI 3 的原創學習文章已經寫了 20 多篇了（會一直放出來，目前 23 篇），因此做一個合集，獻給那些對新版本腳手架使用...

phpmatt 2019-08-23 12:00 評論0 收藏0