vue中的nextTick作用

在实习的过程中遇到这么一个场景，有一个轮播选项卡，每次点击之后，当前的选项要居中，也就是要在容器的正中间，那么就使用scrollTo这个方法或者设置容器的scrollLeft属性就能实现，但问题就出现在这里，无论怎么设置都不生效，最后使用了nextTick这个方法就能正常生效了，由于之前只粗略看过这个方法，没有实际用过，这次就学习了~

changeEffect() {
    
    
  this.$nextTick(() => {
    
    
    let offsetWidth = this.$refs.scrollItem[this.currentProductIndex].offsetWidth; //item
    let scrollLeft = this.$refs.scrollItem[this.currentProductIndex].offsetLeft; //选中的元素滚到可视区域的最左边
    const containWidth = this.$refs.scrollBox.offsetWidth; //容器的宽度
    let resultSpot = scrollLeft - containWidth / 2 + offsetWidth / 2; //最终要停留的点
    this.$refs.scrollBox.scrollTo(resultSpot, 0)
  })
},

先看一下官方是如何说明的：
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

意思就很明显了，为了提高渲染的效率，不是每次数据一改变，vue就去更新视图的，而是将改变存到队列中，等队列中的改变到达一定数量或者到达一定时间才去更新视图。
那么当我们想在修改数据后立即看到DOM执行结果时，就需要用到nextTick方法。

总结：由于vue异步更新的机制，修改dom操作有时不能马上看到效果，需要放在nextTick中去修改，才能马上看到效果。