快捷導(dǎo)航

vue.nextTick()與setTimeout的區(qū)別及說明

更新時間：2024年03月07日 08:43:11 作者：wei_dan1129

這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue.nextTick()的使用場景

Vue中DOM渲染是在mounted()鉤子函數(shù)中，created()鉤子函數(shù)中DOM還未渲染，無法直接操作DOM

1、在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中

在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進(jìn)行任何渲染，而此時進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。

與之對應(yīng)的就是mounted()鉤子函數(shù)，因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數(shù)中進(jìn)行任何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中更改了按鈕內(nèi)容"; 
	      })
	        
	  }
  });
  </script>

2、當(dāng)項目中你想在改變DOM元素的數(shù)據(jù)后基于新的dom做點什么，對新DOM一系列的js操作都需要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中；

通俗的理解是：更改數(shù)據(jù)后當(dāng)你想立即使用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都是異步函數(shù) 不同的是nextTick比setTimeout優(yōu)先執(zhí)行

原因：

macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
micro-task(微任務(wù))：Promise，process.nextTick
process.nextTick：process.nextTick(callback)類似node.js版的"setTimeout"，在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。
javascript是單線程
setTimeout：因為要入微任務(wù)隊列，即使是0最快也要4ms，要等待出隊。

宏任務(wù)的執(zhí)行時間大于微任務(wù)的執(zhí)行時間