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,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com