Vue NextTick介绍与使用原理_vue.js_

{{testMsg}}

{{num}} for(let i=0; i<100000; i++){ num = i } 

this.testMsg="修改后的值"; console.log(this.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值 Vue.nextTick(function(){ console.log(document.querySelector('#firstBtn').innerText) }) 

this.message = '修改后的值' console.log(this.$refs.aa.innerText) // => '原始的值' this.$nextTick(function () { console.log(this.$refs.aa.innerText) // => '修改后的值' }) 

await Vue.nextTick() console.log(document.querySelector('#firstBtn').innerText) 

export function nextTick(cb?: Function, ctx?: Object) { let _resolve; // cb 回调函数会经统一处理压入 callbacks 数组 callbacks.push(() => { if (cb) { // 给 cb 回调函数执行加上了 try-catch 错误处理 try { cb.call(ctx); } catch (e) { handleError(e, ctx, 'nextTick'); } } else if (_resolve) { _resolve(ctx); } }); // 执行异步延迟函数 timerFunc if (!pending) { pending = true; timerFunc(); } // 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用 if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve; }); } }

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) } }

function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } }