vue.nextTick()与setTimeout的区别及说明
作者：wei_dan1129
这篇文章主要介绍了vue.nextTick()与setTimeout的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
nextTick相当于一个异步函数：
- 在下次 DOM 更新循环结束之后执行延迟回调。
- 在修改数据之后立即使用这个方法，获取更新后的 DOM。
vue.nextTick()的使用场景
Vue中DOM渲染是在mounted()钩子函数中，created()钩子函数中DOM还未渲染，无法直接操作DOM
1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
data: {
arr: [1,2,3],
},
created() {
console.log('created',document.querySelectorAll('li').length)
this.$nextTick(()=>{
console.log('nextTick',document.querySelectorAll('li').length)
document.querySelectorAll('li')[0].innerHTML="created中更改了按钮内容";
})
}
});
</script>
2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；
通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
data: {
arr: [1,2,3],
},
methods: {
getAdd(){
this.arr = [4,5,6,7];
this.$nextTick(()=>{
document.querySelectorAll('li')[3].innerHTML="33333333333333";
console.log('nextTick',document.querySelectorAll('li').length)
})
},
},
created() {
console.log('created',document.querySelectorAll('li').length)
}
});
</script>
li点击后 页面展示 由上图更改为
如果不放在nextTick中
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
data: {
arr: [1,2,3],
},
methods: {
getAdd(){
this.arr = [4,5,6,7];
document.querySelectorAll('li')[3].innerHTML="44444444444444";
console.log('methods',document.querySelectorAll('li').length)
},
},
created() {
console.log('created',document.querySelectorAll('li').length)
}
});
</script>
li点击后报错 因为DOM还未渲染
setTimeout
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
data: {
arr: [1,2,3],
},
methods: {
getAdd(){
this.arr = [4,5,6,7];
setTimeout(() => {
document.querySelectorAll('li')[3].innerHTML="44444444444444";
console.log('methods', document.querySelectorAll('li').length);
});
},
},
created() {
console.log('created',document.querySelectorAll('li').length)
}
});
</script>
li点击后页面展示为
nextTick与setTimeout都是异步函数 不同的是nextTick比setTimeout优先执行
原因：
- macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
- micro-task(微任务)：Promise，process.nextTick
- process.nextTick：process.nextTick(callback)类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。
- javascript是单线程
- setTimeout：因为要入微任务队列，即使是0最快也要4ms，要等待出队。
宏任务的执行时间大于微任务的执行时间
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。