---

---

前言

在vue項目開發過程中，有個需求，就是當屏幕大于1024時，我們默認為PC模式。小于1024時，我們默認為H5模式。但是有的界面我們想在PC和H5上面展示不同的數據，請求不同的接口，而且要動態改變，就是屏幕縮小的時候做出改變。

下面介紹監聽當前屏幕的寬度，動態請求數據更改數據。

---

一、代碼如下：

const contentData = ref('')// 使用響應式
const state = reactive({screenWidth: window?.innerWidth,
})
// 用來判斷不用多次加載
const isLoading = ref(false)const requestData = async () => {try {// 根據PC判斷const isPc = window?.innerWidth >= 1024let tabId = import.meta.env.WEB_IDif (isPc)tabId = import.meta.env.PC_IDconst result = await apis.getxxxxxInfo(tabId)if (result && result.data && result.data.content)contentData.value = result.data.content}catch (error) {console.error(error)}
}onMounted(() => {// 第一次加載數據requestData()// 增加window監聽window.addEventListener('resize', () => {state.screenWidth = window?.innerWidth})
})// 監聽某個值
watchEffect(() => {if (state.screenWidth >= 1024) {if (isLoading.value)returnisLoading.value = truerequestData()}else {if (!isLoading.value)returnisLoading.value = falserequestData()}
}

總結

這就是vue監聽當前屏幕大小做不同的操作，希望幫助到你。