Vue中$nextTick和$forceUpdate如何正确使用？

本文共计963个文字，预计阅读时间需要4分钟。

1. 使用 `nextTick` 方法，`vm.$nextTick([callback])` 将回调函数延迟到下次 DOM 更新循环之后执行，确保在数据更新后立即使用更新后的 DOM，然后等待 DOM 更新完成。与全局方法 `Vue.nextTick` 类似，不同之处在于这里的 `t` 表示回调的延迟时间。

1、$nextTick

vm.$nextTick( [callback] )

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

应用场景：

1、 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
2、 因为在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将

DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。