Vue:nexttick是何方神圣?

Vue:nextTick是何方神圣?

1. 官方定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

2. 解释

  • Vue.nextTick()其实主要用于生命周期里,当你在上一个钩子函数中需要处理下一个钩子函数层面的内容时,可将这些操作放在Vue.nextTick的回调函数中。当Vue实例进行到该钩子阶段时,会将nextTick中的操作放到下一个钩子阶段去进行,实现了延迟处理。

3. 举个例子

  • 当你需要在created阶段对dom进行操作时,一定要将这些操作放在nexttick中。原因在于created阶段dom元素还未进行任何渲染,对其操作都是徒劳无功的。放在nextTick中的操作将会在下一个钩子阶段——mounted进行。
  • 注意mounted阶段不能保证所有的子组件都被挂载,如果你希望等到整个视图都加载完再进行操作,可将操作放在mounted函数里的nextTick去进行。

猜你喜欢

转载自blog.csdn.net/yivisir/article/details/110334024