nextTick-function.uvue

<template>
  <view class="page">
    <view class="rect" :style="{width: width, height: height}"></view>
    <view class="row"></view>
    <view class="row">
      <text ref="text">$nextTick Before Width:</text>
      <text>{{nextTickBeforeWidth}}</text>
    </view>
    <view class="row">
      <text ref="text">$nextTick Before Height:</text>
      <text>{{nextTickBeforeHeight}}</text>
    </view>
    <view class="row">
      <text ref="text">$nextTick After Width:</text>
      <text>{{nextTickAfterWidth}}</text>
    </view>
    <view class="row">
      <text ref="text">$nextTick After Height:</text>
      <text>{{nextTickAfterHeight}}</text>
    </view>
  </view>
</template>

<script lang="ts">
type INodePosition = {
  top: number
  left: number
  right: number
  bottom: number
  width: number
  height: number
}
export default {
  data () {
    return {
      value: 0,
      width: 100,
      height: 100,

      nextTickBeforeWidth: 0,
      nextTickBeforeHeight: 0,
      nextTickAfterWidth: 0,
      nextTickAfterHeight: 0,
    }
  },
  mounted () {
    this.nextTickCallback()
    this.nextTickPromise()
  },
  methods: {
    nextTickCallback (): void {
      this.width = 200

      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
        const rect = ret[0] as NodeInfo

        this.$nextTick(() => {
          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
            const rect = ret[0] as NodeInfo
            this.nextTickAfterWidth = rect!.width!
          })
        })

        this.nextTickBeforeWidth = rect!.width!
      });
    },
    nextTickPromise (): void {
      this.height = 200

      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
        const rect = ret[0] as NodeInfo

        this.$nextTick().then(() => {
          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
            const rect = ret[0] as NodeInfo
            this.nextTickAfterHeight = rect!.height!
          })
        })

        this.nextTickBeforeHeight = rect!.height!
      });
    }
  }
}
</script>

<style>
.page {
  font-size: 16px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rect {
  background-color: red;
}
</style>