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

update()

src/core/observer/watchers.js

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

update()

elseif(
this
.sync)
else
}

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

export

function
queuewatcher
(watcher: watcher)
else
queue.
splice
(i +1,
0, watcher)
}// queue the flushif(
!waiting)
// 啟動非同步任務
nexttick
(flushschedulerqueue)}}
}

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'))
}}

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的型別...