场景：当我们在项目开发中，有时候某个宽度，需要根据界面当前的宽度动态设置。
一.一种常见的是使用vw的方式设置宽度，这样当我们的屏幕发生变化时，可以跟着动态的修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.div {
width: 20vw;
height: 50px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
</html>可以在设置宽度时，采用vw的方式。
二、今天在使用vant组件进行开发时，vant组件中swipe中的宽度设置，只能接受px。
这时候就不能通过vw直接粗暴的设置。我们可以使用resize事件，来动态的实时获取界面宽度，再把根据这个div与设计稿的比例，动态的设置宽度。可以通过以下代码实现。
import { onMounted, onUnmounted, ref } from 'vue'
const width = ref(0)
const setWidth = () => width.value = window.innerWidth
onMounted(() => {
setWidth()
window.addEventListener('resize', setWidth)
})
onUnmounted(()=>{
window.removeEventListener('resize', setWidth)
})
通过addEventListener，把事件添加到了window上，当当前组件不用时，需要在onUnmounted中，将该事件销毁，节约资源。
三、利用@vueuse/core这个包，帮助我们快速的实现。
1、下载：
pnpm add @vueuse/core
2.使用
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
这时候，获取到的width可以跟着我们屏幕尺寸变化而动态变化。
3.最后附上vueUse官网：https://v4-11-2.vueuse.org/
如果遇见一些常见的需求可以先看看 @vueuse/core 是否提供，这样可以提高开发效率。
窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等
