vue中this.$nextTick

首先我們先來看看官方介紹的用法：

将回調延遲到下次 DOM 更新循環之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。

它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的執行個體上。

了解：

1.總結來說， 假設我們更改了某個dom元素内部的文本，而這時候我們想直接列印出這個被改變後的文本是需要dom更新之後才會實作的，

也就好比我們将列印輸出的代碼放在setTimeout(fn, 0)中；

具體代碼如下(代碼放在一個元件内)：

    <template>

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

    </template>

    export default {

        data(){

            return {

                content: '初始值'

            }

        }

    }

    methods: {

               testClick(){

                  this.content = '改變了的值';

                  // 這會直接列印的話， 由于dom元素還沒有更新， 是以列印出來的還是未改變之前的值；

                  console.log(that.$refs.tar.innerText);//初始值

               }

            }

2.this.$nextTick()這個方法作用是當資料被修改後使用這個方法會回調擷取更新後的dom再render出來

    // 方法

        methods: {

               testClick(){

                  this.content = '改變了的值';

                  this.$nextTick(() => {

                      // dom元素更新後執行， 是以此處能正确列印出更改之後的值；

                      console.log(that.$refs.tar.innerText); //改變了的值

                  })

               }

            }