场景：当我们在项目开发中，有时候某个宽度，需要根据界面当前的宽度动态设置。
一.一种常见的是使用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 是否提供，这样可以提高开发效率。
窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等
