一、Vue 中 $nextTick 作用与原理
Vue 在更新 DOM 时是异步执行的,在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。所以修改完数据,立即在方法中获取DOM,获取的仍然是未修改的DOM。
$nextTick的作用是:该方法中的代码会在当前渲染完成后执行,就解决了异步渲染获取不到更新后DOM的问题了。 $nextTick的原理:$nextTick本质是返回一个Promise
应用场景:
1. 在钩子函数created()里面想要获取操作Dom,把操作DOM的方法放在$nextTick中
2. 点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点。
showsou(){
this.showit = true //修改 v-show
document.getElementById("keywords").focus() //在第一个 tick 里,获取不到输入框,自然也获取不到焦点
}
修改为:
showsou(){
this.showit = true
this.$nextTick(function () {
// DOM 更新了
document.getElementById("keywords").focus()
})
}
二、js 事件循环
- js的执行顺序,先同步后异步
- 异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列
- 调用Promise 中的resolve,reject属于微任务队列,setTimeout属于宏任务队列
注意以上都是 队列,先进先出。
微任务和宏任务
实际上,异步任务也被分为微任务和宏任务,这两种任务在最直观的区别在于优先级
如上文所说,当我们在执行栈中将同步任务执行完了之后,我们会去查看任务队列中的任务,首先查看的是微任务,如果有微任务,将其拿到执行栈中执行,如果没有,则去查看宏任务,做一样的操作
从上面的流程看出,微任务的优先级是大于宏任务的
而从这两个任务的命令角度,可以有另一种也是比较准确的理解,我们可以将任务队列中存在的任务也看出宏任务,而宏与微,实际上就是大和小的区别,微任务的存在,是为了能够在两个花费时间长的宏任务之间,去处理一些微小的任务,所以,实际上我们是在处理完任务队列中的任务后,在执行下一个宏任务之前,查看当前是否有微任务,如果有,就利用这个间隙去执行微任务,等到微任务都执行完了,再去执行下一个宏任务
因此,即使同时有多个宏任务被加入队列中,在这些宏任务之间切换时,也要去看微任务队列中是否有微任务,如果有的话就要先执行这些微任务
微任务包括 process.nextTick
,promise
,MutationObserver
。
宏任务包括 script
, setTimeout
,setInterval
,setImmediate
,I/O
,UI rendering
。
例1
(function() {
setTimeout(() => {
console.log(0);
});
new Promise(resolve => {
console.log(1);
setTimeout(() => {
resolve();
Promise.resolve().then(() => console.log(2));
console.log(3);
});
Promise.resolve().then(() => console.log(4));
}).then(() => {
console.log(5);
Promise.resolve().then(() => console.log(8)); //这句是多加的
setTimeout(() => console.log(6));
});
console.log(7);
})();
// 1,7,4,0,3,5,2,8,6
例2
await相当于promise的内容,await后的语句console.log('async1 end‘) 相当于promise().then内的语句
promise状态一旦改变了 就不会在变化,所以 resolve(2) 后, resolve(1) 不会输出