vue中的nextTick作用

在Vue的开发过程中,遇到轮播选项卡点击居中问题,发现直接修改scrollLeft属性无法立即生效。通过深入理解$nextTick,了解到Vue为提高渲染效率,异步更新DOM。在changeEffect方法中使用$nextTick确保DOM更新后再进行滚动定位,成功解决了问题。这是一次关于Vue更新机制和$nextTick实际运用的学习心得。
摘要由CSDN通过智能技术生成

在实习的过程中遇到这么一个场景,有一个轮播选项卡,每次点击之后,当前的选项要居中,也就是要在容器的正中间,那么就使用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中去修改,才能马上看到效果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值