常见缺陷从 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.
    })
  }
}