要点

在vue中，数据发生变化之后DOM并不会立即变化，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新

示例代码

this.name ='JS每日一题' // 如这个绑定在某一个DOM元素上

console.log(this.$el.textContent) // 这时DOM还没有更新,所以不会得到文字JS每日一题

this.$nextTick(()=>
  console.log(this.$el.textContent) // nextTick 是在DOM更新后执行，这里打印JS每日一题
)

触发时机

在同一事件循环中的数据变化后，DOM更新完成, 执行 nextTick(callback) 内的回调

总结

• 数据的变化到 DOM 的重新渲染是一个异步过程
• 我们必须在 nextTick 后执行DOM相关的操作

参考文章链接

Vue.$nextTick你真的懂了吗？？？ (opens new window)
vue异步更新dom原理 (opens new window)