宽带接入Vue中nextTick的原理
Vue中会⽤到⼀个nextTick()的⽅法，在Vue实例中更改数据之后需要改动DOM，如果需要操作更新后的DOM，就要使⽤nextTick()，确保内部的函数是在下⼀轮循环中才会执⾏。
官⽹的定义如下：
在下次 DOM 更新循环结束之后执⾏延迟回调。在修改数据之后⽴即使⽤这个⽅法，获取更新后的 DOM。
nextTick使⽤⽅法有回调和Promi两种，更常见的是在实例调⽤this.$nextTick(() => {回调⽅法})。
浅谈nextTick原理
在项⽬⽂件夹中，可以找到nextTick源码，具体地址是node_modules\vue\src\core\util\next-tick.js，代码不长，添加⾃⼰理解的备注后代码如下：import { noop } from 'shared/util'
// 错误处理函数
import { handleError } from './error'
// 是否是IE、IOS、内置函数
import { isIE, isIOS, isNative } from './env'
// 使⽤微任务标识符
export let isUsingMicroTask = fal
// 存回调函数的数组
const callbacks = []
// pending 是⼀个标识符，
let pending = fal
// 遍历执⾏回调函数
// 遍历执⾏回调函数
function flushCallbacks () {
pending = fal
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// 根据下⾯的判断来给timerFunc定义
毕业三十年let timerFunc
// ⾸先第⼀顺位是使⽤Promi实现延迟回调，并且判断是否是原⽣Promi
if (typeof Promi !== 'undefined' && isNative(Promi)) {
制举const p = solve()
// 将timerFunc定义为Promi，并且延迟通过lushCallbacks执⾏所有回调
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) tTimeout(noop)
}
// 设置使⽤微任务标识符因为Promi.then()是⼀个微任务
isUsingMicroTask = true
} el if (!isIE && typeof MutationObrver !== 'undefined' && (
isNative(MutationObrver) ||
))
// 当不是原⽣Promi时，第⼆顺位是使⽤MutationObrver API
{
//
let counter = 1
/
/ 创建MutationObrver，⽤于监听DOM变化，并且执⾏flushCallbacks函数
const obrver = new MutationObrver(flushCallbacks)
// 设置⼀个观测节点
const textNode = ateTextNode(String(counter))
// 将观测节点设置为观察⽬标的改变
obrver.obrve(textNode, {
characterData: true
})
// 定义timerFunc
timerFunc = () => {
// counter会在0/1之间切换
工作年限怎么填写counter = (counter + 1) % 2
// 并且将新counter写⼊到观测节点，这个数值的变化就会触发MutationObrver的检测，从⽽触发回调执⾏ textNode.data = String(counter)
}
isUsingMicroTask = true
} el if (typeof tImmediate !== 'undefined' && isNative(tImmediate))
不堪重负{
// 当Promi和MutationObrver，都⽆法使⽤时，⽤tImmediate定时器，这⾥就算宏任务了
timerFunc = () => {
tImmediate(flushCallbacks)
}
} el {
// 上⾯三种情况都不可时候⽤的时候，就⽤最普通的定时器，宏任务切换到下⼀次循环
timerFunc = () => {
tTimeout(flushCallbacks, 0)
}
}
// 实际暴露出去的函数
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve曾海英
// 统⼀处理回调函数
callbacks.push(() => {
魔兽密集
if (cb) {
try {
cb.call(ctx)
商鞅变法
} catch (e) {
// 错误处理函数
handleError(e, ctx, 'nextTick')
}
} el if (_resolve) {
_resolve(ctx)
}
})
// pending 为fal 说明本轮事件循环中没有执⾏过timerFunc()
