通过元素的 getBoundingClientRect() 方法获取元素的实际宽高与实际展示的不符合

我的代码：通过 css 设置样式，当 body 属性 v-direction=1 时，设置一个高度，默认会设置一个高度

.container {
  .video-container {
    height: 400px;
  }
}
body[v-direction='1'] {
    .container {
      .video-container {
        height: calc(100% - 90px);
      }
    }
}

现象：通过元素的 getBoundingClientRect() 获取的元素宽高与实际展示的不相符

原因：这里获取的是初始化给该元素设置的宽高，如果后续通过 css 媒体查询或者其他条件修改了元素的宽高，这里会有一个异步或时间顺序问题，导致获取的与实际的不一致

解决：由于我这里的属性 v-direction 视频的方向是通过监听视频的相关事件获取之后，赋值到 body 上的，所以这里是一个异步函数，执行顺序一定在 getBoundingClientRect() 之后，于是我需要加个 setTimeout

 setTimeout(() => {
    const obj = container.getBoundingClientRect() 
}, 10)

他的执行顺序在异步设置 v-direction 属性的逻辑之后，即可。