1. 程式人生 > >this.$nextTick與Vue.nextTick

this.$nextTick與Vue.nextTick

**this.$nextTick()**官方介紹:將回調延遲到下次 DOM 更新迴圈之後執行。為了在資料變化之後等待 Vue 完成更新 DOM (可以在資料變化之後立即使用 ,得到的就是更新後的資料)。它跟全域性方法 Vue.nextTick 一樣,不同的是回撥的 this 自動繫結到呼叫它的例項上。
一個修改官方的例子講的很明白:

<div class="app">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
  <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
  <button @click="changeMsg"> Change the Message</button>
</div>
</body>
<script>
  new Vue({
    el: '.app',
    data: {msg: 'Hello Vue.', msg1: '', msg2: ''},
    methods: {
      changeMsg () {
        this.msg = "Hello world.";
        this.msg1 = this.$refs.msgDiv.innerHTML;       //hello.vue 這裡資料改變了,卻沒有渲染DOM
        this.$nextTick(() => {
          this.msg2 = this.$refs.msgDiv.innerHTML      //hello.world  正確的輸出
        });
      }           //第一次點選是上面的輸出,再次點選全部為hello.world
    }
  })
</script>