vue-cli中的this.$nextTick詳解

官方介紹：

將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它，然後等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

理解：

總結來說， 假設我們更改了某個dom元素內部的文本，而這時候我們想直接打印出這個被改變後的文本是需要dom更新之後纔會實現的，也就好比我們將打印輸出的代碼放在setTimeout(fn, 0)中；

代碼演示：

<template>
    <div>
      <button ref="tar" type="button" @click="testClick">{{ content }}</button>
    </div>
</template>

<script>
    export default {
      name: "demo",
      data() {
        return {
          content: '初始值'
        }
      },
    methods:{
      testClick(){
        this.content = '改變了的值';
        // 這會直接打印的話， 由於dom元素還沒有更新， 因此打印出來的還是未改變之前的值；
        console.log(this.$refs.tar.innerText);//初始值
      }
    }
    }

</script>

<style scoped>

</style>

this.$nextTick方法：

<template>
    <div>
      <button ref="tar" type="button" @click="testClick">{{ content }}</button>
    </div>
</template>

<script>
    export default {
      name: "demo",
      data() {
        return {
          content: '初始值'
        }
      },
    methods:{
      testClick(){
        this.content = '改變了的值';
        this.$nextTick(() => {
          // dom元素更新後執行， 因此此處能正確打印出更改之後的值；
          console.log(this.$refs.tar.innerText); //改變了的值
        })
      }
    }
    }

</script>

<style scoped>

</style>

以上是本章全部內容