vue.$nextTick应用
前言
在做一个用v-if管制input暗藏显示的性能时,显示后须要设置inpu焦点,然而ref设置焦点时,获取到的却是undefined。
思路
查找材料后,发现是因为input关上后立刻就取查看数据导致的。就是说,在关上显示input时,vue并没有马上去更新dom数据,而是先将这个操作放入一个队列中;如果咱们是反复执行的话,队列还会进去反复操作;等同一事件循环中的所有数据变动实现后,再进行解决队列中的数据。
为了在数据更新操作之后操作dom,所以能够在数据变动之后立刻应用vue.$nextTick
,这样回调函数会在DOM更新实现后被调用,就能够获取最新的DOM元素。
理解$nextTick
vue官网文档的解释为:
在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法,获取更新后的 DOM。
简略的了解就是:当数据更新了,在dom中渲染后,主动执行该函数。
会用到的小知识点
宏工作(macrotask)
主代码块,setTimeout,setInterval, setImmediate,MessageChannel,postMessage
微工作(microtask)
promise,MutationObserver
工作执行程序以及渲染的执行
macrotask -> microtask -> 渲染 -> macrotask -> microtask -> 渲染 -> ……
源码剖析
const callbacks = []
let pending = false
let timerFunc
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}
从这段源码中,能够看到它基本上做的事件就是在nextTick的外层定义变量就造成了一个闭包,所以咱们每次调用$nextTick的过程其实就是在向callbacks新增回调函数的过程。
callbacks新增回调函数后又执行了timerFunc函数,pending
用来标识同一个工夫只能执行一次。那么这个timerFunc函数是做什么用的呢,咱们持续来看代码:
export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
//判断1:是否原生反对Promise
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
//判断2:是否原生反对MutationObserver
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
//判断3:是否原生反对setImmediate
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
//判断4:下面都不行,间接用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
这里呈现了好几个isNative
函数,用来判断所传参数是否在以后环境原生就反对。
能够看到这外面是做了四个判断,对以后环境进行一直的降级解决。尝试应用原生的Promise.then
、MutationObserver
和setImmediate
,上述三个都不反对最初应用setTimeout;
降级解决的目标都是将flushCallbacks
函数放入微工作(判断1和判断2)或者宏工作(判断3和判断4),期待下一次事件循环时来执行。MutationObserver
是Html5的一个新个性,用来监听指标DOM构造是否扭转,也就是代码中新建的textNode;如果扭转了就执行MutationObserver构造函数中的回调函数,不过是它是在微工作中执行的。
最初,终于找到了咱们最终须要的flushCallbacks
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
它所做的事件也十分的简略,把callbacks数组复制一份,而后把callbacks置为空,最初把复制进去的数组中的每个函数顺次执行一遍;所以它的作用仅仅是用来执行callbacks中的回调函数。
总结
到这里,整个nextTick代码剖析结束,总结一下他的流程:
- 把回调函数放入callbacks期待执行
- 将执行函数放到微工作或者宏工作中
- 事件循环到了微工作或者宏工作,执行函数顺次执行callbacks中的回调
本文自参考
发表回复