常見缺陷從 ready() 鉤子訪問 DOM

ready() 鉤子的常見用例是訪問 DOM，例如啟動 Javascript 外掛，獲取元素的尺寸等。

問題

由於 Vue 的非同步 DOM 更新機制，當呼叫 ready() 鉤子時，無法保證 DOM 已完全更新。這通常會導致錯誤，因為元素未定義。

解決方案

對於這種情況， $nextTick() 例項方法可以提供幫助。此方法將提供的回撥函式的執行推遲到下一個 tick 之後，這意味著當所有 DOM 更新都保證完成時會觸發它。

例：

module.exports {
  ready: function () {
    $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
    
    this.$nextTick(function() {
      $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update.
    })
  }
}