Skip to content

Commit

Permalink
feat: u
Browse files Browse the repository at this point in the history
  • Loading branch information
cutPicturesMan committed Jun 18, 2020
1 parent b8284d1 commit 7954d9d
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/core/observer/scheduler.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ if (inBrowser && !isIE) {

/**
* Flush both queues and run the watchers.
* 刷新队列并运行观察程序
*/
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
Expand All @@ -81,10 +82,17 @@ function flushSchedulerQueue () {
// user watchers are created before the render watcher)
// 3. If a component is destroyed during a parent component's watcher run,
// its watchers can be skipped.
// 刷新前排序队列
// 这样做确保了:
// 1、组件的更新顺序始终是从父组件到子组件(因为父组件总是比子组件先创建)
// 2、组件内用户创建的watcher比组件自身的render watcher先运行(因为用户的watcher比render watcher先创建)
// 3、如果组件在父组件的watcher运行的时候被销毁,该组件的watcher会被跳过
// TODO 写一篇[].sort使用注意事项
queue.sort((a, b) => a.id - b.id)

// do not cache length because more watchers might be pushed
// as we run existing watchers
// 不要缓存队列的length属性,因为当我们运行已存在的watcher时,可能会有更多的watcher被加入到队列中
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
Expand All @@ -94,6 +102,7 @@ function flushSchedulerQueue () {
has[id] = null
watcher.run()
// in dev build, check and stop circular updates.
// 在开发环境中,检查并停止陷入死循环的更新
if (process.env.NODE_ENV !== 'production' && has[id] != null) {
circular[id] = (circular[id] || 0) + 1
if (circular[id] > MAX_UPDATE_COUNT) {
Expand Down
12 changes: 12 additions & 0 deletions src/core/util/next-tick.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ function flushCallbacks () {
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).

// 这里我们有一个使用microtasks来实现的异步延迟包装器
// 在2.5版本我们使用macrotasks(结合microtasks)
// 然而,如果在重绘前改变了状态,那么这么做会有微妙的问题(例如 #6813 out-in过渡,改变的状态在下一个tick才会生效,导致css先生效,页面闪一下)
// 而且,在事件处理器中使用macrotasks,会导致一些奇怪的行为并且无法规避(例如 #7109, #7153, #7546, #7834, #8109)
// 所以我们再次在各处使用microtasks
// 这种权衡的一个主要缺点是,在某些情况下微任务具有过高的优先级,并且在本应该按顺序发生的事件之间执行,甚至是同一事件源冒泡监听回调之间执行(#6566)
let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
Expand All @@ -38,6 +45,11 @@ let timerFunc
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:

// nextTick函数的行为,改变了microtask队列。microtask队列可以通过原生的Promise.then或者MutationObserver改变
// MutationObserver有着广泛的支持,然而在iOS >= 9.3.3的UIWebView上,当在触摸事件处理函数上触发MutationObserver时有着严重的bug
// 在触发了几次之后,MutationObserver完全停止了工作
// 所以,如果原生的Promise是可用的,我们将使用原生Promise
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
Expand Down

0 comments on commit 7954d9d

Please sign in to comment.