vue3 nextTick失效 解决方法

在使用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 }
    )