开始之前先看下官方对其的定义
定义: 在下次 dom 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
看完是不是有一堆问号?我们从中找出来产生问号的关键词
从上面三个疑问大胆猜想一下
好了,问题都抛出来了,先来看一下如何使用
import { createApp, nextTick } from 'vue'
const app = createApp({
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
// 这里获取DOM的value是旧值
await nextTick()
// nextTick 后获取DOM的value是更新后的值
console.log('Now DOM is updated')
}
}
})
<a href="https://vue3js.cn/run/nextTick" target="_blank">亲自试一试</a>
那么 nextTick 是怎么做到的呢?为了后面的内容更好理解,这里我们得从 js 的执行机制说起
我们都知道 JS 是单线程语言,即指某一时间内只能干一件事,有的同学可能会问,为什么 JS 不能是多线程呢?多线程就能同一时间内干多件事情了
是否多线程这个取决于语言的用途,一个很简单的例子,如果同一时间,一个添加了 DOM,一个删除了 DOM, 这个时候语言就不知道是该添还是该删了,所以从应用场景来看 JS 只能是单线程
单线程就意味着我们所有的任务都需要排队,后面的任务必须等待前面的任务完成才能执行,如果前面的任务耗时很长,一些从用户角度上不需要等待的任务就会一直等待,这个从体验角度上来讲是不可接受的,所以JS中就出现了异步的概念
概念
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步
现在我们回来vue中的nextTick
实现很简单,完全是基于语言执行机制实现,直接创建一个异步任务,那么nextTick自然就达到在同步任务后执行的目的
const p = Promise.resolve()
export function nextTick(fn?: () => void): Promise<void> {
return fn ? p.then(fn) : p
}
<a href="https://vue3js.cn/run/nextTick-demo-1.html" target="_blank">亲自试一试</a>
看到这里,有的同学可能又会问,前面我们猜想的 DOM 更新也是异步任务,那他们的这个执行顺序如何保证呢?
别急,在源码中nextTick还有几个兄弟函数,我们接着往下看
queueJob 维护job列队,有去重逻辑,保证任务的唯一性,每次调用去执行 queueFlush queuePostFlushCb 维护cb列队,被调用的时候去重,每次调用去执行 queueFlush
const queue: (Job | null)[] = []
export function queueJob(job: Job) {
// 去重
if (!queue.includes(job)) {
queue.push(job)
queueFlush()
}
}
export function queuePostFlushCb(cb: Function | Function[]) {
if (!isArray(cb)) {
postFlushCbs.push(cb)
} else {
postFlushCbs.push(...cb)
}
queueFlush()
}
开启异步任务(nextTick)处理 flushJobs
function queueFlush() {
// 避免重复调用flushJobs
if (!isFlushing && !isFlushPending) {
isFlushPending = true
nextTick(flushJobs)
}
}
处理列队,先对列队进行排序,执行queue中的job,处理完后再处理postFlushCbs, 如果队列没有被清空会递归调用flushJobs清空队列
function flushJobs(seen?: CountMap) {
isFlushPending = false
isFlushing = true
let job
if (__DEV__) {
seen = seen || new Map()
}
// Sort queue before flush.
// This ensures that:
// 1. Components are updated from parent to child. (because parent is always
// created before the child so its render effect will have smaller
// priority number)
// 2. If a component is unmounted during a parent component's update,
// its update can be skipped.
// Jobs can never be null before flush starts, since they are only invalidated
// during execution of another flushed job.
queue.sort((a, b) => getId(a!) - getId(b!))
while ((job = queue.shift()) !== undefined) {
if (job === null) {
continue
}
if (__DEV__) {
checkRecursiveUpdates(seen!, job)
}
callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
}
flushPostFlushCbs(seen)
isFlushing = false
// some postFlushCb queued jobs!
// keep flushing until it drains.
if (queue.length || postFlushCbs.length) {
flushJobs(seen)
}
}
好了,实现全在上面了,好像还没有解开我们的疑问,我们需要搞清楚 queueJob 及 queuePostFlushCb 是怎么被调用的
// renderer.ts
function createDevEffectOptions(
instance: ComponentInternalInstance
): reactiveEffectOptions {
return {
scheduler: queueJob,
onTrack: instance.rtc ? e => invokeArrayFns(instance.rtc!, e) : void 0,
onTrigger: instance.rtg ? e => invokeArrayFns(instance.rtg!, e) : void 0
}
}
// effect.ts
const run = (effect: ReactiveEffect) => {
...
if (effect.options.scheduler) {
effect.options.scheduler(effect)
} else {
effect()
}
}
看到这里有没有恍然大悟的感觉?原来当响应式对象发生改变后,执行 effect 如果有 scheduler 这个参数,会执行这个 scheduler 函数,并且把 effect 当做参数传入
绕口了,简单点就是 queueJob(effect),嗯,清楚了,这也是数据发生改变后页面不会立即更新的原因effect传送门
一个例子让大家明白
{{num}}
for(let i=0; i<100000; i++){
num = i
}
如果没有 nextTick 更新机制,那么 num 每次更新值都会触发视图更新,有了nextTick机制,只需要更新一次,所以为什么有nextTick存在,相信大家心里已经有答案了。
nextTick 是 vue 中的更新策略,也是性能优化手段,基于JS执行机制实现
vue 中我们改变数据时不会立即触发视图,如果需要实时获取到最新的DOM,这个时候可以手动调用 nextTick
Vue中有个API是nextTick,官方文档是这样介绍作用的:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。理解这部分内容,有助于理解Vue对页面的渲染过程
异步更新机制使用微任务或宏任务,基于事件循环运行,在 Vue 中对性能起着至关重要的作用,它对重复冗余的 watcher 进行过滤。而 nextTick 根据不同的环境,使用优先级最高的异步任务
vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因。只有异步渲染才可以实现整合操作
前两天在开发时遇到一个需求:打开对话框的时候自动聚焦其中的输入框。由于原生的 autofocus 属性不起作用,需要使用组件库提供的 focus 方法手动手动获取焦点。于是有如下代码
在Vue使用组件时,对于组件数据的更改不会立即反应在DOM中,因为Vue是异步更新DOM的。所以需要使用nextTick()或者$nextTick()函数来更新DOM。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!