import { watch } from 'vue';
watch(()=>window.screen.width,(newVal)=>{
console.log(newVal);
必須使用
window.addEventListener
才有作用
<script setup>
window.addEventListener('resize',()=>{
console.log(window.screen.width);
</script>
Q: 我想請問為什麼使用 watch 去監控螢幕縮放，是無效的?
watch 監聽的東西必須是 vue 的 ref/reactive 變數，但 window.screen.width 不是
Q: 必須使用 window.addEventListener 才有作用
你那樣的寫法並不是透過 vue 去監控 window.screen.width，而是使用原生的 resize 偵聽事件。這樣子做無法直接拿到 vue 元件的 <template> 使用
如果你要把 resize 監聽的結果拿到 Vue 使用，你仍然需要宣告一個 ref/reactive 變數來接。
在 onMounted 的時候監聽 resize 事件，並且在 onUnmounted 取消監聽 resize 事件
https://stackblitz.com/edit/vitejs-vite-siwv1z?file=src%2FApp.vue&terminal=dev
題外話，這邊是用樓主問題說的監聽螢幕解析度大小，縮放視窗不會有改變
如果要監聽網頁畫面的大小縮放，而非螢幕解析度的大小縮放，可以用 window.innerWidth 與 window.innerHeight
<template>{{ windowWidth }}, {{ windowHeight }}</template>
<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue';
let windowWidth = ref(0);
let windowHeight = ref(0);
function resizeWindow() {
windowWidth.value = window.screen.width;
windowHeight.value = window.screen.height;
onMounted(() => {
window.addEventListener('resize', resizeWindow);
resizeWindow();
onUnmounted(() => {
window.removeEventListener('resize', resizeWindow);
</script>
