vue3 nextTick失效解决方法

最新推荐文章于 2025-02-25 15:15:00 发布

こうえんで Tina

最新推荐文章于 2025-02-25 15:15:00 发布

阅读量2.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_54421294/article/details/131932122

版权

在Vue框架开发中，确保数据完全渲染后调用方法是必要的，特别是计算列表高度时。文章介绍了如何结合`watch`和`this.$nextTick`来实现在数据更新后执行代码，以确保获取到准确的数据。示例中展示了在组件挂载后及数据变化时使用`nextTick`来滚动到指定tab的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Vue框架的时候，有时候需要在Vue在页面数据染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。

可以结合watch和this.$nextTick来实现。

1.引入watch和nextTick

    import { onMounted, ref, nextTick ,watch} from 'vue';

2.在watch中再一次用nextTick

// 接口类型
export interface detailType {
    headInfo:headInfoType,
    historyLog:historyLogType,
    memberInfo:memberInfoType,
    orderInfo:orderInfoType,
    overtimeInfo?:overtimeInfoType,
    workerInfo:workerInfoType,
    isBallSub:number,
    existServiceRecord?:boolean
}


/****************    数据初始定义    ************** */


let detailList = ref<detailType>()  //订单详情数据


/****************    生命周期    ************** */

    onMounted(() => {
      nextTick(() => {
        tabs.value?.scrollTo(active.value)
      })
    })


// 监听
    watch(  ()=>deepClone(detailList.value),(newValue, oldValue) => {
          nextTick(() => {
            tabs.value?.scrollTo(active.value)
          })
        },
        { deep: true }
    )