什么是nextTick
?
定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
看完这个定义不免心生疑问:
- 下次 DOM 更新循环结束之后是什么时候?
- 执行延迟回调?
- 更新后的 DOM?
基于以上问题和平时的使用经验可以基本解答疑问:
- vue 更新DOM的策略是异步更新
- nextTick 可以接收一个函数做为入参
- nextTick 后能拿到最新的数据
那么nextTick
是怎么实现的呢?既然是异步更新,这涉及到了 js
的执行机制,下面一起复习一下js执行机制。
【VUE3源码学习】nextTick 实现原理_vue3銝要exttick_Chx.zhang的博客-CSDN博客
概念:
nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务(事件循环机制),定义了一个异步方法,多次调用 nextTick 会将方法存入 队列中,通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法 。
nextTick是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。所有放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;
使用nextTick保证当前视图渲染完成。
promise是浏览器内部自己实现的一个微任务,内部使用的不是setTimeout,详细请看面试题中的promise总结。
vue核心面试题(nextTick实现原理)_面试题 vue $nexttick是什么原理_王三六的博客-CSDN博客
1 首先,在组件中引入nextTick方法。可以使用以下代码进行引入:
import { nextTick } from 'vue'
2 然后,在需要使用$nextTick功能的地方,调用nextTick方法。例如,在异步函数内部等待DOM更新后执行某个操作,可以使用以下代码:
setup() {
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}
3 另外,如果在普通的方法中使用$nextTick,在setup函数中可以这样写:
setup() {
let otherParam = reactive({ showA: false })
nextTick(() => {
otherParam.showA = true
})
return { otherParam }
}
总结起来,Vue 3.0中使用$nextTick的方法是通过引入nextTick方法,并在需要的地方调用该方法来等待DOM更新。这样可以确保在DOM更新完成后执行相应的操作。
Vue 3.0中的nextTick是微任务。微任务是指不进入主线程,而进入任务队列的任务。在Vue中,nextTick方法用于在DOM更新之后执行回调函数,以确保在DOM更新完成后再执行相关逻辑。因此,Vue 3.0中的nextTick被归类为微任务。