【思考】$nextTick 與 setTimeout 的一點對比！

作者：Chimezie Enyinnaya
譯者：前端小智
來源：blog

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

一個前端開發人員(小智)走進了一個Vue酒吧。小智點了他最喜歡的雞尾酒：Nuxt。酒保正在努力製作中。然後他自己就嘮叨了起來。

小智講述了他是如何在Vue 3的例項方法下發現$nextTick的，並大吃一驚。小智
使用Vue已經有一段時間了，他已經習慣了把$watch和$emit寫成例項方法。那麼，$nextTick是用來做什麼的？Vue文件說，它"[defers]回撥，在下一個DOM更新週期後執行"。

但是小智並不相信。

他繼續講述他是如何嘗試這樣做的：

this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false

有用。為什麼？

nextTick做什麼？

nextTick接受一個延遲到下一個DOM更新週期的回撥函式。這只是Vue的一種說法，"嘿，如果你想在DOM更新後執行一個函式（這種情況很少發生），我希望你使用nextTick而不是setTimeout"。

Vue.nextTick(() => {}) // syntax

下面很快就會講到setTimeout和nextTick引數。我們用這個例子來視覺化nextTick的行為:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: 'getCurrentTime',
  data() {
    return {
      currentTime: ''
    }
  },
  mounted() {
    this.currentTime = 3;

    this.$nextTick(() => {
        let date = new Date()
        this.currentTime = date.getFullYear()
    });
  }
}
</script>

在J電腦上執行這個程式碼片段。它將顯示2021年。並不是說如果你去掉nextTick，就不會得到同樣的結果。然而，你應該明白，Vue會根據資料中的內容對DOM進行修改。

在上面的程式碼片段中，Vue將DOM更新為3，然後呼叫回撥，將DOM更新為2021，最後將控制權交給瀏覽器，瀏覽器將顯示2021。

到目前為止，我們已經研究了nextTick在回撥佇列中插入回撥函式並在適當的時候執行該函式。

這個你可能會感興趣，nextTick中的回撥是作為事件迴圈中的一個微任務使用的。nextTick的原始碼明確指出，"nextTick行為利用了微任務佇列，可以通過本地的Promise.then或MutationObserver來訪問。"

setTimeout vs nextTick

在DOM更新後執行函式的另一種方法是使用JavaScript的setTimeout()函式。

我們將上面的程式碼用setTimeout替換nextTick:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: 'getCurrentTime',
  data() {
    return {
      currentTime: ''
    }
  },
  mounted() {
    this.currentTime = 3;

    setTimeout(() => {
      let date = new Date()
      this.currentTime = date.getFullYear()
    }, 0);
  }
}
</script>

執行此程式碼片段。首先看到3然後2021。它發生得很快，因此如果沒有看到此行為，需要重新整理瀏覽器。

在上面的程式碼片段中，Vue將DOM更新為3，並提供瀏覽器控制。然後瀏覽器顯示3，呼叫回撥函式，將DOM更新到2021，最後將控制權交給瀏覽器，現在瀏覽器顯示2021。

nextTick的實現在不支援Promise和MutationObserver的瀏覽器（IE 6-10和Opera Mini瀏覽器）上，使用setTimeout作為後備方法，對於不支援Promise和MutationObserver的瀏覽器（IE 10），它更傾向於setImmediate。

何時使用 nexttick

當你想使用setTimeout時
當你想確定DOM能反映你的資料時
在嘗試執行非同步操作時，遇到Uncaught (in promise) DOMException等錯誤。記住，Vue是非同步更新DOM的

最後來個示例:

<div id="app">
  <div ref="listScroll" class="scrolledList">
    <ul ref="scrolledHeight">
      <li v-for="month in months">
        {{month}}
      </li>               
    </ul>
  </div>

  <input type="text" placeholder="Add Month" v-model="month">
  <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button>
</div>

<script src="https://unpkg.com/vue@next"> 
  Vue.createApp({
    data() {
      return {
        month: '',
        months: ['Jan', 'Feb', 'Apr', 'May', 'June', 'July', 'Aug']
      }
    },
    mounted() {
      this.updateScrollNextTick()
    },
    methods: {
      addMessage() {
        if(this.month == ''){
          return
        }

        this.months.push(this.month)
        this.month = ''
        this.updateScrollNextTick()
      },
      updateScrollNextTick () {
        let scrolledHeight = this.$refs.scrolledHeight.clientHeight

        this.$nextTick(() => {
          this.$refs.listScroll.scrollTo({
            behavior: 'smooth',
            top: scrolledHeight
          })
        })
      }
    },
  })
  .mount("#app")
</script>

示例地址:https://codepen.io/ammezie/pe...

主要部分：