nextTick介紹

• nextTick()會在DOM已掛載、渲染完成後，執行nextTick()內的程式碼。
• 通常Vue.nextTick()是為了對DOM非同步更新，提升效能

在for迴圈中，連續更改了1000次 number 的資料，如果使用同步更新，則需要1000次更新。
但用nextTick()可以在跑完迴圈後，做一次性更新，這樣可以減少資料重複更新與不必要的計算。

基本用法

<div id="app">
  <p ref="text">{{ text }}<p>
  <input type="button" @click="send()" :value="btnName" >
</div>

let app = new Vue({
  el: '#app',
  data: {
    btnName: '送出',
    text: '送出前',
  },
  methods: {
    send() {
      this.text = '送出後';
      this.$nextTick(function () {
        console.log('nextTick:' + this.$refs.text.innerHTML);
      });
      console.log('function run end:' + this.$refs.text.innerHTML);
    },
  },
});

Render Result

"function run end:送出前"
"nextTick:送出後"

點擊按鈕後，text值更新為送出後，而send()執行完，且DOM渲染到頁面上後才會執行nextTick()。
因此console.log會先看到function run end:送出前，後面才看到nextTick:送出後。

created() 階段操作DOM

created()這個階段無法操作DOM，原因是在created()執行的時候DOM其實並未進行任何渲染。如想操作DOM，需用nextTick()。

<div id="app">
	created message:{{ text }}
</div>

let app = new Vue({
  el: '#app',
  data: {
    text: 'before created'
  },
  created(){
    this.$nextTick(() => {
        this.text = 'created end'
    })
	this.text = 'after created'
  }
});

Render Result

created message:created end

初始data.text值為before created，但在created()階段，還未渲染before created到頁面。
當DOM掛載完後，因nextTick作用，頁面上渲染的資料text值會更新成created end。

Codepen

下一篇介紹complie

Resource
vue.nextTick()方法的使用詳解
簡單理解Vue中的nextTick
Vue.nextTick 的原理和用途