$nextTick的使用場景

可能只憑一些概念性的講解還是無法對nextTick機制有很清晰的了解，還是上個示例來了解一下吧。

<template>
 <div class="app">
        <div ref="contentDiv">{{content}}</div>
        <div>在nextTick執行前獲取內容:{{content1}}</div>
        <div>在nextTick執行之后獲取內容:{{content2}}</div>
        <div>在nextTick執行前獲取內容:{{content3}}</div>
    </div>
</template>

<script>
export default {
 name:'App',
 data: {
  content: 'Before NextTick',
  content1: '',
  content2: '',
  content3: ''
 },
 methods: {
  changeContent () {
   this.content = 'After NextTick' // 在此處更新content的數據
   this.content1 = this.$refs.contentDiv.innerHTML //獲取DOM中的數據
   this.$nextTick(() => {
    // 在nextTick的回調中獲取DOM中的數據
    this.content2 = this.$refs.contentDiv.innerHTML 
   })
   this.content3 = this.$refs.contentDiv.innerHTML
  }
 },
 mount () {
  this.changeContent()
 }
}
</script>

　　

當我們打開頁面后我們可以發現結果為:

After NextTick

在nextTick執行前獲取內容:Before NextTick

在nextTick執行之后獲取內容:After NextTick

在nextTick執行前獲取內容:Before NextTick

　　

所以我們可以知道,雖然content1和content3獲得內容的語句是寫在content數據改變語句之后的，但他們屬於同一個事件循環中，所以content1和content3獲取的還是 'Before NextTick' ,而content2獲得內容的語句寫在nextTick的回調中，在DOM更新之后再執行，所以獲取的是更新后的 'After NextTick'。