vue項目中this.$nextTick()的使用

​

​this.$nextTick()​

​将回調延遲到下次 ​

​DOM​

​​ 更新循環之後執行。在修改資料之後立即使用它，然後等待 ​

​DOM​

​​ 更新。它跟全局方法 ​

​Vue.nextTick ​

​​一樣，不同的是回調的​

​this​

​​自動綁定到調用它的執行個體上。假設我們更改了某個​

​dom​

​​元素内部的文本，而這時候我們想直接列印出這個被改變後的文本是需要​

​dom​

​​更新之後才會實作的，也就好比我們将列印輸出的代碼放在​

​setTimeout(fn, 0)​

​中。例如：

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">點選</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
  }
</script>      

列印結果如下：

可以根據列印的順序看到，在​

​created()​

​​鈎子函數執行的時候​

​DOM ​

​​其實并未進行任何渲染，而此時進行​

​DOM​

​​操作并無作用，而在​

​created()​

​​裡使用​

​this.$nextTick()​

​​可以等待​

​dom​

​​生成以後再來擷取​

​dom​

​對象。

再看一個例子：

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">點選</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>      

列印結果如下：

根據上面的例子可以看出，在方法裡直接列印的話， 由于​

​dom​

​​元素還沒有更新， 是以列印出來的還是未改變之前的值，而通過​

​this.$nextTick()​

​​擷取到的值為​

​dom​

​更新之後的值。

<template>
    <button ref="tar" 
        type="button" 
        name="button" 
        @click="testClick">{{content}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                content: '初始值'
            }
        }
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.content = '改變了的值'
　　　　　　　　 // 這時候直接列印的話，由于dom元素還沒更新
　　　　　　　　 // 是以列印出來的還是未改變之前的值
　　　　　　　　 console.log(that.$refs.tar.innerText) // 初始值
　　　　　　 }
　　　　 }
    }
</script>      

methods：{
    testClick() {
        this.content = '改變了的值'
        this.$nextTick(() => {
            // dom元素更新後執行，是以這裡能正确列印更改之後的值
            console.log(that.$refs.tar.innerText) // 改變了的值
        })
    }
}