Vue中 等待DOM或者數據完成 在執行 --this.$nextTick()

雖然 Vue.js 通常鼓勵開發人員沿着“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。比如一個新聞滾動的列表項。如果在這里需要操作dom, 應該是等待 Vue 完成更新 DOM之后。

一、新聞滾動列表

1、在created函數中獲取后台數據；

2、模板引擎中用v-for生成列表項；

3、調用滾動函數，假設該滾動函數式原聲方法寫的；

4、什么時候開始調用滾動函數比較合適呢？

二、this.$nextTick()

官方解釋：將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
})

三、新聞滾動列表中的this.$nextTick()放哪里？

　　因為數據是根據請求之后獲取的，所以應該放到請求的回調函數里面。

四、注意this.nextTick()

this.nextTick(callback)，當數據發生變化，更新后執行回調。
this.$nextTick(callback)，當dom發生變化，更新后執行的回調。