官方解释: 在下次 DOM 更新循环结束之后执行延迟回调. 在修改数据之后
立即使用这个方法, 获取更新后的 DOM.
$nextTick 可以在更新 dom 后执行操作, 避免取不到更新后元素的情况
在 vue 生命周期的 created()钩子函数进行的 DOM 操作时一定要放在 Vue.nextTick()的回调函数中.
原因是在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染, 会出现取不到元素的情况.
swiper.JS 就需要放在 nextTick()中
- new Vue({
- el: '#app',
- created() {
- this.$nextTick(function(){
- // 代码
- })
- }
- })
在 Vue 中有一个 nextTick 方法, 偶然一天, 我发现不管代码的顺序如何, nextTick 总是要比 setTimeout 先要执行. 同样是排队, 凭什么你 nextTick 就要比我快?
图片描述
开局一道题, 内容全靠编.(在 node 下运行, 答案在文末给出.)
- new Promise((resolve) => {
- console.log(1);
- process.nextTick(() => {
- console.log(2);
- });
- resolve();
- process.nextTick(() => {
- console.log(3);
- });
- console.log(4);
- }).then(() => {
- console.log(5);
- });
- setTimeout(() => {
- console.log(6);
- }, 0);
- console.log(7);
那么, 打印的顺序到底是什么呢?
- # 事件循环 #
- for(var i = 0; i <5; i++){
- setTimeout(function after() {
- console.log(i);
- }, 0);
- }
这道题想必大家都见得很多了, 答案脱口而出 5 个 5. 为什么呢? 答: 闭包. 为什么会产生闭包呢? 答:...
这一切的一切都要从女娲补天开始说起(你咋不从盘古开天开始说起呢?).
图片描述
简单说明一下:
一般 JS 是从上往下执行的, 执行的时候会被放在调用栈中(图中的 Call Stack).
然后执行到了异步的事件(Ajax, 定时器等), 浏览器将作为 web API 的一部分创建一个计时器, 它将为你处理倒计时.
时间到了之后就会进入到任务队列当中(Callback Queue).
事件循环从回调队列中获取函数, 并将其推到调用堆栈.
从第一步开始.
所以, 即便是 setTimeout(fn, 0)(实际上最小时间间隔是 4ms)也是会从下一个事件周期开始执行.
上例中, 由于 after 函数引用了 i 并且会在下一个事件周期中被调用, 导致了 i 的内存没办法被释放, 等下个周期再来, 哼 生米都煮成稀饭了. i 都被煮成 5 了.
关于内存, 给大家推荐一篇我曾经翻译的一篇文章 JavaScript 是如何工作的: 内存管理 + 如何处理 4 个常见的内存泄漏.
对理解闭包也非常有帮助.
这里我只是简单提了一下事件循环, 更多的细节参考文末参考文献.
宏任务与微任务
一个宿主环境只有一个事件循环, 但可以有多个任务队列. 宏任务队列 (macro task) 与微任务队列 (micro task) 就是其中之二.
每次事件循环的时候, 会先执行宏任务队列中的任务, 然后再执行微任务队列中的任务. 那么宏任务与微任务分别有哪些呢?
宏任务: script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering.
微任务: process.nextTick, Promise, Object.observer, MutationObserver.
- new Promise((resolve) => {
- resolve();
- }).then(() => {
- console.log(1);
- });
- setTimeout(() => {
- console.log(2);
- }, 0);
- console.log(3);
按照上面的说法, 应该打印出 3,2,1 啊. 但实际上却打印出了 3,1,2. 原来像 process.nextTick 和 Promise 这种微任务, 都添加的当前循环的微任务队列之中. 所以会比当前循环中的所有宏任务要后执行, 会比下个循环中的宏任务要先执行.
process.nextTick 与 Promise
- process.nextTick(() => {
- console.log(1);
- });
- new Promise((resolve) => {
- resolve();
- }).then(() => {
- console.log(2);
- });
- process.nextTick(() => {
- console.log(3);
- });
为什么我要把这两个同属于微任务的拎出来提一下呢? 自己测试一下吧, 因为结果大概会出乎你的意料.
why?
图片描述
还好互联网是强大的. 没有什么是百度不到的, 如果有, 那就 google.
"process.nextTick 永远大于 promise.then, 原因其实很简单... 在 Node 中,_tickCallback 在每一次执行完 TaskQueue 中的一个任务后被调用, 而这个_tickCallback 中实质上干了两件事:
nextTickQueue 中所有任务执行掉(长度最大 1e4,Node 版本 v6.9.1)
第一步执行完后执行_runMicrotasks 函数, 执行 microtask 中的部分 (promise.then 注册的回调) 所以很明显 process.nextTick> promise.then"
小结
Vue 中的 nextTick 是宏任务与微任务混合使用, 需要手动切换. 终于真相大白了. 定时器: 好吧 我就原谅你比我先吧.
那么开头题的答案是什么呢? 还是自己动手测试一下吧.
纸上得来终觉浅, 觉知此事要躬行
setImmediate
顺序之争还有一个奇怪的现象.
- setImmediate(() => {
- console.log(1);
- });
- setTimeout(() => {
- console.log(2);
- }, 0);
然而你会发现, 特么有时候打印 1,2, 有时候打印 2,1. 你为什么像个女人一样啊.
图片描述
Node.JS 官网给出的解释是:
setImmediate(): 是被设计用来一旦当前阶段的任务执行完后执行.
setTimeout(): 是让代码延迟执行.
如果没有在一个 I/O 周期执行, 那么其执行顺序是不确定的.
如果在一个 I/O 周期执行, setImmediate 总是优先于 setTimeout 执行.
- const fs = require('fs');
- fs.readFile(__filename, () => {
- setTimeout(() => {
- console.log('timeout');
- }, 0);
- setImmediate(() => {
- console.log('immediate');
- });
- });
总是: 先打印 immediate 再打印 timeout.
来源: http://www.jianshu.com/p/2f805772e844