vue原始碼學習之非同步更新佇列

2021-10-06 16:38:36 字數 2697 閱讀 9097

update()

src/core/observer/watchers.js

在執行dep.notify()之後,watcher就會執行update()方法。

update()

elseif(

this

.sync)

else

}

queuewatcher()

執行watcher入隊操作,會進行去重處理。

export

function

queuewatcher

(watcher: watcher)

else

queue.

splice

(i +1,

0, watcher)

}// queue the flushif(

!waiting)

// 啟動非同步任務

nexttick

(flushschedulerqueue)}}

}

nexttick()

src/core/util/next-tick.js

export

function

nexttick

(cb?

: function, ctx?

: object)

catch(e

)}else

if(_resolve)})

if(!pending)

// $flow-disable-lineif(

!cb &&

typeof promise !==

'undefined'))

}}

timerfunc()

src/core/util/next-tick.js

let timerfunc;

/*規則

*1、首選微任務執行非同步操作,promise,mutationobserver

*2、次選setimmediate,最後選擇settimeout;

*/if

(typeof promise !==

'undefined'

&&isnative

(promise)

) isusingmicrotask =

true

}elseif(

!isie &&

typeof mutationobserver !==

'undefined'&&(

isnative

(mutationobserver)

||// phantomjs and ios 7.x

mutationobserver.

tostring()

==='[object mutationobserverconstructor]'))

)timerfunc=(

)=>

isusingmicrotask =

true

}elseif(

typeof setimmediate !==

'undefined'

&&isnative

(setimmediate))}

else

}

跟瀏覽器的重新整理機制有關,採用微任務執行重新整理佇列函式時,瀏覽器不會進行重新整理,就可以實現批量更新資料後進行重新整理。

flushschedulerqueue()

function

flushschedulerqueue()

id = watcher.id

has[id]

=null

// 最重要的就是執行了run()方法

watcher.

run(

)// in dev build, check and stop circular updates.

if(process.env.

node_env

!=='production'

&& has[id]

!=null)"`

:`in a component render function.`

), watcher.vm

)break}}

}// keep copies of post queues before resetting state

const activatedqueue = activatedchildren.

slice()

const updatedqueue = queue.

slice()

resetschedulerstate()

// call component updated and activated hooks

callactivatedhooks

(activatedqueue)

callupdatedhooks

(updatedqueue)

// devtool hook

/* istanbul ignore if */

if(devtools && config.devtools)

}

Vue原始碼學習之initEvents

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

vue原始碼學習

new vue發生了什麼 此處只針對最簡單基礎的new vue過程,一般專案中採用.vue單檔案元件的形式開發,下面會介紹 對於 runtime compile 版本 初始化乙個 vue 例項的一系列相關環境 watcher,lifecycle,methods等等 compile 將 templat...

Vue原始碼之createElement函式(五)

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