vue $nextTick 原理详解
一.nextTick定义
二.为什么使用 nextTick
Vue 在更新 DOM 时是异步执行的。
只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
在事件环境中的数据变化完成，在进行渲染［视图更新］，可以避免DOM的频繁变动，从而避免了因此带来的浏览器卡顿，大幅度提升性能.
三.nextTick的理解和应用场景
-
在钩子函数created()里面想要获取dom的内容或者操作dom
-
在视图data更新后，基于新的视图操作该dom
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent)
// 并不会得到'changed' //这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent)
//可以得到'changed'
})
四.事件队列（非阻塞，单线程）
1.JavaScript的运行机制
-
所有同步任务都在主线程上执行，形成一个[执行栈]
-
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
-
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件对应的异步任务，于是结束等待状态，进入执行栈，开始执行(执行顺序，首先执行完当前队列的微任务，再去执行当前队列的宏任务)。
-
主线程不断重复上面的第三步。
2.概括
调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作。
3.MacroTask（宏任务）/ MicroTask（微任务）
MacroTask（宏任务）：script、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）。
MicroTask（微任务）：Process.nextTick（Node独有）、Promise、Object.observe、MutationObserver（具体使用方式查看这里）
4.示例练习
*** 判断其输出
setTimeout(()=>{
console.log("setTimeout1");
Promise.resolve().then(data => { console.log(222); });
});
setTimeout(()=>{ console.log("setTimeout2"); });
Promise.resolve().then(data=>{ console.log(111); })
*** 判断其输出
console.log('script start');
setTimeout(function () {
console.log('setTimeout---0');
}, 0);
setTimeout(function () {
console.log('setTimeout---200');
setTimeout(function () {
console.log('inner-setTimeout---0');
});
Promise.resolve().then(function () {
console.log('promise5');
});
}, 200);
Promise.resolve().then(function () {
console.log('promise1');
}).then(function () {
console.log('promise2');
});
Promise.resolve().then(function () {
console.log('promise3');
});
console.log('script end');
五.源码解析
/* @flow */
/* globals MutationObserver */
import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
/** 是否是微任务 */
export let isUsingMicroTask = false
/** 用来存储所有需要执行的回调函数 */
const callbacks = []
/*
* 表示状态，判断是否有正在执行的回调函数。
* 如果代码中 timerFunc 函数被推送到任务队列中去则不需要重复推送。
*/
let pending = false
/** 用来执行callbacks里面存储的所有回调函数 */
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
/** 保存需要被执行的函数。 */
let timerFunc
/**判断是否支出 Promise 原生调用 */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
/** 判断是否支持 MutationObserver */
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
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
/** 判断是否支持 setImmediate */
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// Fallback to setImmediate.
// Technically it leverages the (macro) task queue,
// but it is still a better choice than setTimeout.
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// Fallback to setTimeout.
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
/**
* @params cb 回调
* @params ctx 执行上下文
*/
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
})
}
}
以上代码表明在vue中处理异步延迟调用的方式主要如下：
-
判断是否支持原生Promise；
-
判断是否支持原生MutationObserver，若支持：
** 创建MutationObserver示例observer ，传参回调为 flushCallbacks
** 创建文本节点textNode，并通过observer 监听 textNode 的内容变化
** 设置timerFunc函数，以触发textNode 的变化，触发 flushCallbacks
-
判断是否支持setImmediate；
-
以上全部不支持，则通过setTimeout（fn， 0）模拟异步延迟调用。
Vue.prototype.$nextTick = function (fn) {
return nextTick(fn, this)
};
参考文献
