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)
初始化先執(zhí)行了 renderMixin 方法, Vue 實(shí)例化執(zhí)行this._init, 執(zhí)行this.init方法中有initRender()
renderMixin
installRenderHelpers( 將一些渲染的工具函數(shù)放在Vue 原型上)
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}
仔細(xì)看這個(gè)函數(shù)， 在Vue中的官方文檔上這樣解釋
Vue 異步執(zhí)行 DOM 更新。只要觀(guān)察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 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用于延遲執(zhí)行一段代碼，它接受2個(gè)參數(shù)（回調(diào)函數(shù)和執(zhí)行回調(diào)函數(shù)的上下文環(huán)境），如果沒(méi)有提供回調(diào)函數(shù)，那么將返回promise對(duì)象。
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
這個(gè)flushCallbacks 是執(zhí)行callbacks里存儲(chǔ)的所有回調(diào)函數(shù)。
timerFunc 用來(lái)觸發(fā)執(zhí)行回調(diào)函數(shù)
先判斷是否原生支持promise，如果支持，則利用promise來(lái)觸發(fā)執(zhí)行回調(diào)函數(shù)；
否則，如果支持MutationObserver，則實(shí)例化一個(gè)觀(guān)察者對(duì)象，觀(guān)察文本節(jié)點(diǎn)發(fā)生變化時(shí)，觸發(fā)執(zhí)行
所有回調(diào)函數(shù)。
如果都不支持，則利用setTimeout設(shè)置延時(shí)為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是一個(gè)構(gòu)造器，接受一個(gè)callback參數(shù)，用來(lái)處理節(jié)點(diǎn)變化的回調(diào)函數(shù)，observe方法中options參數(shù)characterData：設(shè)置true，表示觀(guān)察目標(biāo)數(shù)據(jù)的改變
_render函數(shù)
通過(guò)執(zhí)行 createElement 方法并返回的是 vnode，它是一個(gè)虛擬的 Node。
vnode = render.call(vm._renderProxy, vm.$createElement)
總結(jié)
以上所述是小編給大家介紹的vue 源碼解析之虛擬Dom-render，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序,實(shí)現(xiàn)功能可視化標(biāo)簽拖拽，雙擊標(biāo)簽可修改標(biāo)簽內(nèi)容，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
基于Vue+Node.js實(shí)現(xiàn)埋點(diǎn)功能全流程
埋點(diǎn)（Track）是指在應(yīng)用程序、網(wǎng)站或平臺(tái)中添加代碼,以記錄特定用戶(hù)行為和事件的做法,通過(guò)添加埋點(diǎn)代碼,可以觀(guān)察和分析用戶(hù)行為,以調(diào)整和改進(jìn)產(chǎn)品設(shè)計(jì)和使用體驗(yàn),本文給大家介紹了基于Vue+Node.js實(shí)現(xiàn)埋點(diǎn)功能的全流程,需要的朋友可以參考下2025-04-04
同時(shí)Vue也支持讓開(kāi)發(fā)者,自己注冊(cè)一些指令,這些指令被稱(chēng)為自定義指令,每個(gè)指令都有自己各自獨(dú)立的功能,這篇文章主要介紹了Vue自定義指令簡(jiǎn)介和基本使用,需要的朋友可以參考2024-03-03
vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè)
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè),可以通過(guò)插槽實(shí)現(xiàn)自定義的分頁(yè),本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue中的三種Props:模板Props、配置Props和狀態(tài)Props詳解
這篇文章介紹了Vue中的Props,主要有三種類(lèi)型：模板Props、配置Props和狀態(tài)Props,模板Props用于簡(jiǎn)單的數(shù)據(jù)傳遞和顯示,配置Props用于調(diào)整組件的行為和外觀(guān),狀態(tài)Props用于管理組件內(nèi)部的動(dòng)態(tài)數(shù)據(jù),每種類(lèi)型都有其應(yīng)用場(chǎng)景,理解這些類(lèi)型可以幫助你設(shè)計(jì)出更棒的組件2025-02-02
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過(guò)簡(jiǎn)單定義或?qū)ο蠖x,開(kāi)發(fā)者可以靈活地接收并處理組件上的屬性值,簡(jiǎn)單定義方式通過(guò)數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類(lèi)型、默認(rèn)值及是否必須傳遞等2024-09-09
關(guān)于Element-UI中slot的用法及說(shuō)明
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue車(chē)牌輸入組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06