Vue中如何正确使用$nextTick和$forceUpdate实现视图更新？

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

1. 使用`nextTick`方法确保DOM更新后执行回调在修改数据后，`this.$nextTick()`将延迟执行，直到下一次DOM更新循环之后。这样可以立即使用更新后的数据，然后等待DOM更新完成。

2. 类似全局方法`Vue.nextTick`，但回调延迟执行与全局方法`Vue.nextTick`类似，但这里的`this.$nextTick()`具有延迟执行回调的特性。

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()的回调函数中。