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