vue3 动态监听浏览器窗口变化

定义一个属性记录宽度

const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)

在 vue mounted 的时候 去挂载一下 window.onresize 方法

  onMounted(() => {
      window.onresize = () => {
        return (() => {
          screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        })()
      }
    })

去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth

 watch(() => screenWidth, (val) => {
      screenWidth.value = val
    })

这样screenWidth就跟随浏览器的窗口大小动态变化了

进行使用

    const programHaplomultiple = computed(() => {
      return (screenWidth.value * 0.52) / infoContent.value.width / 320
    })