Vue 原始碼之 nextTick 解析

最近在看 vue 原始碼，一直很好奇這個 nexttick 怎麼實現。

本文涉及微任務和巨集任務，不熟悉的可以看我之前的部落格：

在瀏覽器環境中，常見的 macro task 有 settimeout、messagechannel、postmessage、setimmediate。而常見的 micro task 有 mutationobsever 和 promise.then。

setimmediate 有點類似於 settimeout，屬於 ie 瀏覽器特性，這裡不展開細講。

messagechannel 允許我們建立乙個新的訊息通道，並通過它的兩個messageport屬性傳送資料，有興趣可自行查詢。

任務佇列原始碼：

const callbacks = 

let pending = false
function flushcallbacks () 
}

macro task 延遲實現的原始碼：

let macrotimerfunc	//巨集任務函式

if (typeof setimmediate !== 'undefined' && isnative(setimmediate)) 
} else if (typeof messagechannel !== 'undefined' && ( 
isnative(messagechannel) ||
messagechannel.tostring() === '[object messagechannelconstructor]'
)) } else 
}

micro task 延遲實現的原始碼：

let microtimerfunc	//微任務函式

if (typeof promise !== 'undefined' && isnative(promise)) 
} else

nexttick 函式實現原始碼：

export function nexttick (cb?: function, ctx?: object)  catch (e) 

} else if (_resolve) 
})if (!pending) else 
} if (!cb && typeof promise !== 'undefined') )
}}

Vue原始碼之createElement函式（五）

在render 函式中，最後呼叫的是createelement函式來返回vnode，那麼createelement函式到底完成了什麼功能 1.首先看一下vnode的定義 src core vdom vnode.js vnode被定義為乙個類。2.在createelement中，首先檢測data的型別...

vue原始碼之Array

目錄 響應式具體實現 陣列子集和新增元素的追蹤 array中的問題 object通過setter改變屬性的值，所以我們利用getter時傳送依賴收集，在setter時觸發依賴更新，而且vue將資料轉換成響應式資料是在資料初始化時，對object中之後的屬性新增和刪除操作，無法做到自動更新，而是通過v...

Vue原始碼學習之initEvents

vue原始碼學習之initevents initlifecycle是vue原始碼中core instance events.js下的乙個函式，和上節的initliftcycle一樣，該函式也是在beforecreate鉤子之前呼叫，作用是初始化元件中的事件。下面讓我們來進行 分析。1 initeve...