vue核⼼⾯试题（nextTick实现原理）
概念：
nextTick就是⼀个异步⽅法。nextTick ⽅法主要是使⽤了宏任务和微任务（事件循环机制），定义了⼀个异步⽅法，多次调⽤ nextTick 会将⽅法存⼊ 队列中，通过这个异步⽅法清空当前队列。 所以这个 nextTick ⽅法就是异步⽅法 。
nextTick是将回调函数延迟在下⼀次dom更新数据后调⽤，简单的理解是：当数据更新了，在dom中渲染后，⾃动执⾏该函数。所有放在Tick()回调函数中的执⾏的应该是会对DOM进⾏操作的 js代码；
使⽤nextTick保证当前视图渲染完成。
promise是浏览器内部⾃⼰实现的⼀个微任务，内部使⽤的不是setTimeout，详细请看⾯试题中的promise总结。
nextTick中定义的三个重要变量：
1.callbacks：⽤来存储所有需要执⾏的回调函数
2.pending：⽤来标志是否正在执⾏回调函数
3.timerFunc：⽤来触发执⾏回调函数
nextTick的使⽤场景：
1. 在Vue⽣命周期的created()钩⼦函数进⾏的DOM操作⼀定要放在Tick()的回调函数中。created()钩⼦函数执⾏的时候DOM 其实并未进⾏任何渲染，⽽此时进⾏DOM操作⽆异于徒劳，所以此处⼀定要将DOM操作的js代码放进Tick()的回调函数中。与之对应的就是mounted钩⼦函数，因为该钩⼦函数执⾏时所有的DOM挂载已完成。
2.在数据变化后要执⾏的某个操作，⽽这个操作需要使⽤随数据改变⽽改变的DOM结构的时候，这个操作都应该放进Tick()的回调函数中。
nextTick和$nextTick区别
2.$nextTick(callback)：当dom发⽣变化，更新后执⾏的回调。将回调延迟到下次 DOM 更新循环之后执⾏。在修改数据之后⽴即使⽤它，然后等待 DOM 更新。
3.这两个⽅法没有太⼤的不同。区别在于：nextTick(callback) 是全局的⽅法；⽽ $nextTick(callback) 是回调的 this ⾃动绑定到调⽤它的实例上；所以⽤的更多的是$nextTick(callback)！
原理：
当调⽤nextTick⽅法时会传⼊两个参数，回调函数和执⾏回调函数的上下⽂环境，如果没有提供回调函数，那么将返回promise对象。⾸先将拿到的回调函数存放到数组中，判断是否正在执⾏回调函数，如果当前没有在pending的时候，就会执⾏timeFunc，多次执⾏nextTick 只会执⾏⼀次timerFunc，timeFunc其实就是执⾏异步的⽅法，在timeFunc⽅法中选择⼀个异步⽅法（⾸先判断是否⽀持promise，如果⽀持就将flushCallbacks放在promise中异步执⾏，并且标记使⽤微任务。如果不⽀持promise就看是否⽀持MutationObserver⽅法，如果⽀持就new了⼀个MutationObserver类，创建⼀个⽂本节点进⾏监听，当数据发⽣变化了就会异步执⾏flushCallbacks⽅法。如果以上两个都不⽀持就看是否⽀持setImmediate⽅法，如果⽀持setImmediate 就去异步执⾏flushCallbacks⽅法。如果以上三种⽅法都不⽀持，就使⽤setTimeout），然后异步去执⾏flushCallbacks⽅法，flushCallbacks中就是将传递的函数依次执⾏。
nextTick多次调⽤会维持⼀个数组，之后会异步的把数组中的⽅法以此执⾏，这样的话⽤户就会在视图更新之后再获取到真实的dom元素。
// 判断当前浏览器是否⽀持promise
if (typeof Promise !== 'undefined' && isNative(Promise)) { // Promise
const p = solve()
timerFunc = () => { // flushCallbacks就包裹了⼀个promise
p.then(flushCallbacks) // 异步的去执⾏flushCallbacks
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true // 标记了⼀下使⽤的是微任务
} else if (!isIE && typeof MutationObserver !== 'undefined' && ( // MutationObserver
isNative(MutationObserver) ||
)
) {
// 如果不是IE，并且⽀持原⽣的MutationObserver，也是⼀个微任务
let counter = 1
const observer = new MutationObserver(flushCallbacks) // new了⼀个MutationObserver类  const textNode = ateTextNode(String(counter)) // 创建了⼀个⽂本节点
observer.observe(textNode, { // 原⽣api，帮我们监听⼀个节点
characterData: true // 当数据发⽣变化了就会异步执⾏flushCallbacks⽅法
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter) // 数据更新
}
isUsingMicroTask = true // 标记了⼀下使⽤的是微任务
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // setImmediate  // setImmediate原⽣⽅法，默认ie下有，⾼版本的⾕歌也⽀持
timerFunc = () => {
setImmediate(flushCallbacks)pending
}
} else { // setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。