我的开源库:
- fly-barrage 前端弹幕库,项目官网:https://fly-barrage.netlify.app/,可实现类似于 B 站的弹幕效果,并提供了完整的 DEMO,Gitee 推荐项目;
- fly-gesture-unlock 手势解锁库,项目官网:https://fly-gesture-unlock.netlify.app/,在线体验:https://fly-gesture-unlock-online.netlify.app/,可高度自定义锚点的数量、样式以及尺寸;
官方文档点击这里。
今天和大家讲讲 Vue 中的 vm.$nextTick 和 Vue.nextTick,这两个方法的底层实现是一样的,都是使用了名为 nextTick 的公共方法,看下面的源码。
声明 Vue 的原型函数 $nextTick,这个原型函数能够在 Vue 的实例上访问:
// src/core/instance/render.js
import {
nextTick
} from '../util/index'
export function renderMixin (Vue: Class<Component>) {
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}
}
声明全局方法 nextTick:
// src/core/global-api/index.js
import {
nextTick
} from '../util/index'
export function initGlobalAPI (Vue: GlobalAPI) {
Vue.nextTick = nextTick
}
通过上面两处源码可以发现,这两个方法的内部都使用了 nextTick 这个方法,所以在下面的源码解析中,研究 nextTick 方法的源码即可,该函数定义在 src/core/util/next-tick.js 中。
通过 nextTick 方法,我们可以确保通过 nextTick 注册的回调函数在 DOM 更新完成之后执行,这样,我们就可以在回调函数中获取并操作更新完成的 DOM。这里需要重点关注的点是 "DOM 更新完成之后",DOM 到底什么时候更新完成?Vue 中 DOM 的更新机制是什么?这些前置的知识点都需要在解析 nextTick 方法源码之前先搞清楚,只有这样我们才能理解 nextTick 方法的源码,所以接下来,先对这些前置知识点进行讲解。
1,前置知识
1-1,Vue 组件更新机制
在 Vue 中,Watcher 的监控级别是组件,组件中的任何一个状态发生变化,都会通知到对应的 Watcher 实例,这个 Watcher 实例再触发执行组件的重新渲染。也就是说,如果在一轮事件循环中有多个组件状态发生变化,则会多次触发组件的重新渲染机制。但事实上,Vue 对这一现象做了优化,一轮事件循环中多个状态发生变化,并不需要多次触发组件重新渲染,只要等这一轮事件循环组件状态都修改完成后,重新渲染组件一次即可。
Vue 的具体做法是在一次事件循环中将收到通知的 Watcher 实例存储到一个数组中,并且在添加 Watcher 实例的时候,先判断该 Watcher 实例是否已经存在于数组中,如果已经存在的话,则不会再次将 Watcher 实例存储到数组中。然后在下一次事件循环中,Vue 会触发数组中所有 Watcher 实例的组件重新渲染机制,然后清空数组。
从这里,可以发现,Vue 中的状态更新是同步的,而对应的组件重新渲染是异步的。
对应的源码如下所示:
// src/core/observer/watcher.js
export default class Watcher {
/**
* 如果 watcher 实例依赖的数据改变的话,update 方法将被执行
*/
update () {
if (this.lazy) {
// lazy 属性为 true,说明当前的 watcher 实例是针对计算属性的,
// 又因为依赖的数据发生了变化,此时需要将 dirty 设为 true
this.dirty = true
} else if (this.sync) {
// 如果是同步 Watcher 的话,则立即执行 run 方法
this.run()
} else {
// 如果当前的 watcher 实例不是立即触发的话,需要将当前的 watcher 实例
// 添加到 watcher 缓存数组中
queueWatcher(this)
}
}
}
在 update 方法中,会执行 queueWatcher(this) 将当前的 Watcher 实例缓存到数组中。
// src/core/observer/scheduler.js
const queue: Array<Watcher> = []
/**
* 执行 queue 数组中 watcher 实例的 run 方法,触发执行完之后,会对 queue 数组进行清空操作
*/
function flushSchedulerQueue () {
......
}
/**
* 添加一个 watcher 实例到 watcher 队列中
* 如果某一个 watcher 已经被保存到队列中的话,将不会再进行 push 操作。(一个渲染 watcher 有可能监控
* 多个数据,每个数据的改变都会使代码执行到这里,但其实只需要保存一次该渲染 watcher 即可)
*/
/**
* 该函数借助 flushing 和 waiting 变量实现流程的控制
*/
export function queueWatcher (watcher: Watcher) {
// 根据 watcher 的 id 判断这个 watcher 实例有没有保存到队列中,只有没有被缓存的 watcher 实例才会进行接下来的操作
const id = watcher.id
if (has[id] == null) {
has[id] = true
// 如果当前的队列不是刷新状态的话
if (!flushing) {
// 直接将 watcher push 到队列中即可
queue.push(watcher)
} else {
// 如果当前正在进行刷新 watcher 队列,此时需要将当前的 watcher 插入到队列中合适的位置(按照 watcher 的 id 从小到大排列)
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// 如果当前不是等待状态的话,将 waiting 设为 true,在下一个 tick 执行清空并更新 watcher 的操作
// 借助 waiting 变量控制 watcher 队列的清空执行,在同一时刻,只能有一个 flushSchedulerQueue 正在等待(下一个 tick)执行或者正在执行
// 只有当前时刻,没有 flushSchedulerQueue 正在等待执行或者正在执行,才会执行 nextTick(flushSchedulerQueue)
if (!waiting) {
waiting = true
// 调用 nextTick 方法,将 flushSchedulerQueue 函数放到任务队列中
nextTick(flushSchedulerQueue)
}
}
}
queueWatcher 方法主要做的事是将 Watcher 实例存到 queue 数组中,并将 flushSchedulerQueue 函数放到任务队列中。flushSchedulerQueue 函数的作用是触发执行 queue 数组中 Watcher 实例的 run 方法,这会进而触发对应组件的重新渲染。在这里,需要重点关注的点是 queueWatcher 函数是借助 nextTick 方法,将 flushSchedulerQueue 函数放到任务队列中的,这个 nextTick 方法就是我们本节要解析的方法。
因此,本小节得到如下结论:
- 组件中的状态更新是同步的,组件的重新渲染是异步的。
- 能够触发执行组件重新渲染的 flushSchedulerQueue 函数借助 nextTick 方法被放置到了任务队列中。
- nextTick 方法能够将传递给他的函数放置到任务队列中,nextTick 方法的本质就是做这么一件事,并没有什么神奇的。
引申思考:nextTick 方法的本质是将传递给他的函数放置到任务队列中,那么它是如何实现在下次 DOM 更新循环结束之后执行延迟回调的呢?
答:相信看了上面的内容,小伙伴们已经有答案了,那是因为能够触发组件重新渲染的 flushSchedulerQueue 函数也是通过 nextTick 方法放置到任务队列中的,那么我们只要确保 flushSchedulerQueue 函数在任务队列中的位置在我们通过 nextTick 注册的函数所在位置的前面,就能够确保在我们注册的回调函数中能够获取最新的 DOM 元素了,也就是先修改数据,后使用 nextTick 注册回调。
又问:如果我先使用 nextTick 注册回调,后修改数据,在我们注册的回调中,还能获取到最新的 DOM 元素吗?
答:答案是显而易见的,我们无法在注册的回调中获取到最新的 DOM 元素,因为在任务队列中,我们注册的回调函数在前面,flushSchedulerQueue 函数在后面。所以,我们注册的回调函数先执行,而此时,组件还没有重新渲染,因此无法获取到最新的 DOM 元素。由此看来,官网中所描述的 nextTick 能够获取到最新的 DOM 元素,更像是事件循环所产生的副作用。
1-2,事件循环
JavaScript 事件循环的知识点可以看这篇文章,我就不赘述了。
2,nextTick 方法的源码解析
上文说 nextTick 方法能够将传递的函数放到任务队列中,其实这么说是不严谨的,因为其内部并没有直接将传递的函数放到任务队列,而是将传递的函数存储到一个名为 callbacks 的数组中。真正被放置到任务队列中的是一个名为 flushCallbacks 的函数,该函数的作用是遍历 callbacks 数组,并执行其中的每一个回调函数,并且还有清空 callbacks 数组的操作。
nextTick 方法的源码如下所示。
// 存储回调函数的数组
const callbacks = []
let pending = false
// 能够将 flushCallbacks 作为回调函数添加到微任务队列中的函数
let microTimerFunc
// 能够将 flushCallbacks 作为回调函数添加到宏任务队列中的函数
let macroTimerFunc
// nextTick 方法的默认实现是使用 microTimerFunc(微任务队列)
let useMacroTask = false
/**
* nextTick 有两种用法:
* Vue.nextTick(function () {
* // DOM 更新了
* })
*
* nextTick() 函数不传入回调函数的话,就使用 Promise 的形式
* Vue.nextTick()
* .then(function () {
* // DOM 更新了
* })
*/
export function nextTick (cb?: Function, ctx?: Object) {
// _resolve 变量是用于处理 Promise 情形的
let _resolve
// 将回调函数包装一层,保存到 callbacks 数组中
// 使用包装函数的原因是:(1) Vue 可以在包装函数中对 cb 回调函数添加一些 try catch 的代码,使代码更加的健壮
// (2) 如果没有传递 cb 回调函数的话,还可以提供 Promise 的形式
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
// 下面的代码是给 Promise 用的
} else if (_resolve) {
_resolve(ctx)
}
})
// 借助 pending 这个变量,可以确保在执行 flushCallbacks 前,if 里面的逻辑只执行一次,
// 也就是确保在一次事件循环中只向任务队列中添加一个任务。
// if 代码块中的逻辑,用于根据 useMacroTask 变量,将 flushCallbacks 函数是放在微任务队列中,还是宏任务队列中。
if (!pending) {
pending = true
if (useMacroTask) {
macroTimerFunc()
} else {
microTimerFunc()
}
}
// 下面的代码是给 Promise 用的
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
// 如果没有传递 cb 回调函数,并且 Promise 可以使用的话,就返回一个 Promise,在代码的外面可以使用 nextTick().then(()=>{}) 的形式
// 这里最为精髓的一点是:将返回的 Promise 的 resolve 函数赋值给 _resolve,将 resolve Promise 的抓手交给了包装函数
// 这样的话:在下一个 tick 执行包装函数的时候,就会 resolve 这个 Promise,进而执行 nextTick().then(()=>{}) .then() 中的函数
return new Promise(resolve => {
_resolve = resolve
})
}
}
2-1,传递的函数被包装了一层,然后保存到 callbacks 数组中
export function nextTick (cb?: Function, ctx?: Object) {
// _resolve 变量是用于处理 Promise 情形的
let _resolve
// 将回调函数包装一层,保存到 callbacks 数组中
// 使用包装函数的原因是:(1) Vue 可以在包装函数中对 cb 回调函数添加一些 try catch 的代码,使代码更加的健壮
// (2) 如果没有传递 cb 回调函数的话,还可以提供 Promise 的形式
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
// 下面的代码是给 Promise 用的
} else if (_resolve) {
_resolve(ctx)
}
})
......
......
// 下面的代码是给 Promise 用的
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
// 如果没有传递 cb 回调函数,并且 Promise 可以使用的话,就返回一个 Promise,在代码的外面可以使用 nextTick().then(()=>{}) 的形式
// 这里最为精髓的一点是:将返回的 Promise 的 resolve 函数赋值给 _resolve,将 resolve Promise 的抓手交给了包装函数
// 这样的话:在下一个 tick 执行包装函数的时候,就会 resolve 这个 Promise,进而执行 nextTick().then(()=>{}) .then() 中的函数
return new Promise(resolve => {
_resolve = resolve
})
}
}
/**
* nextTick() 函数不传入回调函数的话,就使用 Promise 的形式
* Vue.nextTick()
* .then(function () {
* // DOM 更新了
* })
*/
首先将传递进来的 cb 函数包装了一层,然后 push 到 callbacks 数组中,包装一层函数的好处主要有如下两点:
- 可以在包装函数中添加 try catch 的代码,使代码更加健壮。
- 如果没有传递 ch 函数的话,说明用户想要的是 Promise 的形式,此时应该在包装函数中执行 _resolve 函数,_resolve 函数看最后几行代码。如果用户没有传递 ch 函数并且当前的浏览器支持 Promise 的话,则返回一个 Promise 实例,并将这个 Promise 实例的 resolve 函数赋值给 _resolve 变量。这样,当包装函数执行的时候,就会执行 _resolve 函数,使得返回的 Promise 实例变成 fulfilled 状态,进而执行 Vue.nextTick().then(function(){}) 中的回调函数。
2-2,向事件队列中添加 flushCallbacks 函数
export function nextTick (cb?: Function, ctx?: Object) {
......
......
// 借助 pending 这个变量,可以确保在执行 flushCallbacks 前,if 里面的逻辑只执行一次,
// 也就是确保在一次事件循环中只向任务队列中添加一个任务。
// if 代码块中的逻辑,用于根据 useMacroTask 变量,将 flushCallbacks 函数是放在微任务队列中,还是宏任务队列中。
if (!pending) {
pending = true
if (useMacroTask) {
macroTimerFunc()
} else {
microTimerFunc()
}
}
......
......
}
pending 变量用于确保在一次事件循环中,最多向事件队列添加一次 flushCallbacks 函数。
接下来会根据 useMacroTask 变量的真假值来决定是将 flushCallbacks 函数添加到微任务队列中,还是添加到宏任务队列中。添加到宏任务队列需要执行 macroTimerFunc 方法,添加到微任务队列需要执行 microTimerFunc 方法。这里,大家也许会有疑问,为什么有时会将 flushCallbacks 函数添加到宏任务队列中呢?每次都添加到微任务队列中不行吗?Vue 这么做的原因是微任务队列中的函数执行优先级太高了,在某些情况下甚至会比事件冒泡还要快,这会导致一些非常诡异的 bug,例如:#4521、#6566,但如果全都放到宏任务队列中的话,对一些有重绘和动画的场景也会有性能影响,例如:#6813。所以最终 nextTick 采取的策略是默认都走微任务队列,只有对一些 DOM 交互事件,如 v-on 绑定的事件回调函数的处理,会强制走 macro task,与这部分有关的源码如下所示。
src/core/util/next-tick.js >>> withMacroTask(),源码解析看注释。
/**
* withMacroTask 函数的作用是:给 fn 回调函数做一层包装,保证 fn 函数在执行的过程中,如果修改了状态,
* 那么更新 DOM 的操作会被推到宏任务队列中。
*/
export function withMacroTask (fn: Function): Function {
return fn._withTask || (fn._withTask = function () {
useMacroTask = true
const res = fn.apply(null, arguments)
useMacroTask = false
return res
})
}
src/platforms/web/runtime/modules/events.js >>> add(),源码解析看注释。
// DOM 绑定事件的方法
function add (
event: string,
handler: Function,
once: boolean,
capture: boolean,
passive: boolean
) {
// 使用 withMacroTask 对 handler 包装一层
handler = withMacroTask(handler)
// 如果事件绑定使用了 .once 的话,则给 handler 加一层包装
if (once) handler = createOnceHandler(handler, event, capture)
// 这里只是调用浏览器提供的 API --- node.addEventListener 绑定事件
// target 就是使用了 v-on 指令的 DOM 元素
target.addEventListener(
event,
handler,
supportsPassive
? { capture, passive }
: capture
)
}
2-3,macroTimerFunc()、microTimerFunc()
详细解释在注释中,看注释即可理解。
// 能够将 flushCallbacks 作为回调函数添加到微任务队列中的函数
let microTimerFunc
// 能够将 flushCallbacks 作为回调函数添加到宏任务队列中的函数
let macroTimerFunc
// 根据运行环境的支持情况,给 microTimerFunc 和 macroTimerFunc 不同的实现
/ macroTimerFunc 函数的实现 /
// macroTimerFunc 优先使用 setImmediate,但是 setImmediate 存在兼容性问题,
// 所以使用 MessageChannel 作为备选方案,如果 MessageChannel 也不支持的话,
// 则最终使用 setTimeout 将回调函数添加到宏任务队列中。
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
macroTimerFunc = () => {
setImmediate(flushCallbacks)
}
} else if (typeof MessageChannel !== 'undefined' && (
isNative(MessageChannel) ||
// PhantomJS
MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
const channel = new MessageChannel()
const port = channel.port2
channel.port1.onmessage = flushCallbacks
macroTimerFunc = () => {
port.postMessage(1)
}
} else {
/* istanbul ignore next */
macroTimerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
/ microTimerFunc 函数的实现 /
// 如果当前浏览器支持 Promise 的话,则借助 Promise 将 flushCallbacks 放到微任务队列
// 如果不支持 Promise 的话,则添加微任务队列会被降级成添加到宏任务队列中。
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
microTimerFunc = () => {
p.then(flushCallbacks)
}
} else {
// fallback to macro
microTimerFunc = macroTimerFunc
}
2-4,flushCallbacks() 函数
flushCallbacks() 函数的作用很简单,就是遍历执行 callbacks 数组中的函数,并且还有清空 callbacks 数组的功能。
// 该函数的功能是:遍历 callbacks 数组,并执行其中的每一个回调函数,并且还有清空 callbacks 数组的操作。
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
3,结语
ok,到这里,nextTick 的源码就解析完了,下一篇文章我们说说 Vue.extend()。