背景

vue是非同步渲染的，當data改變之後，DOM不會立刻被渲染，頁面渲染時會將data的修改做整合，多次data修改只會做整合最後一次性渲染出來，這也是非同步渲染的原因。只有非同步渲染才可以實現整合操作。

例子

methods: {
  update() {
    for (let i = 0; i < 10; i++) {
      this.testNum = this.testNum + i;
    }
  },},

在你的 Vue 檢視中， testNum 會發生變化。不過需要注意的是這個變化的過程，雖然我們把 firstNum 迴圈修改了 10 次，但是實際上它只會把最後一次的值更新到檢視上——這也是非常合理的，比如說我們這個 demo 裡，每一次迴圈給 testNum 的賦值只不過是一個過程，最終的目的是拿到 10 次迴圈的計算結果而已。如果我們硬去算 10 次，那麼不必要的效能開銷必然是令人肉疼的。

需求

我們需要對data修改後並拿到DOM，對DOM進行操作解決，

例子

<template>
 <div id="app">
  <ul ref="ul1">
   <li v-for="(v,i) in list" :key="i">{{ v }}</li>
  </ul>
  <button @click="add">add DOM</button>
 </div>
</template>
<script>
export default {
 name: "app",data() {
  return {
   list: ["a","b","c"],};
 },methods: {
  add() {
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   const ulElem = this.$refs.ul1;
   console.log(ulElem.childNodes.length);
  },};
</script>

本來點選完之後陣列長度應該輸出6個，但是實際上陣列長度只有3個，因為data改變後，DOM並不會立刻改變，此時我們是拿不到新增的節點的，這時候的DOM節點還是一開始的a,b,c 。DOM操作執行完之後，它再非同步渲染。

不過我們的期望是點選完之後立刻拿到後面的三個，這時候就需要請出我們的主角nextTick。

  add() {
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   this.list.push(`${Date.now()}`);
   const ulElem = this.$refs.ul1;
   this.$nextTick(() => {
    console.log(ulElem.childNodes.length);
   });
  },

這個例子也可以看出，$nextTick會待DOM渲染完成再回調，同時也可以看出，我們雖然一次點選有三次修改data,但是多次修改會進行整合，最後渲染一次，這也說明渲染也是非同步的，如果是同步，就沒辦法整合。

以上就是淺析vue中的nextTick的詳細內容，更多關於vue中的nextTick的資料請關注我們其它相關文章！