this.$nextTick與Vue.nextTick
阿新 • • 發佈:2019-01-04
**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>