大家好,
我想請問為什麼使用watch
去監控螢幕縮放,是無效的?
//螢幕縮放時,沒有作用
<script setup>
import { watch } from 'vue';
watch(()=>window.screen.width,(newVal)=>{
console.log(newVal);
})
</script>
必須使用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>
你watch的必須是一個vue的ref,window不是也沒辦法沒辦法被vue去監控,當然不行。
像這種對全域做添加事件的,不建議寫在進入口(app.vue)以外的組件裡。萬一你有操作會創建多個組件,會對window添加多次的重複事件。
範例後補,這個不需要用到onMounted。你可以透過provide、inject或狀態管理套件如pinia去存取這種全域變動值
範例
https://vueuse.org/core/useWindowSize/
用 vue3 的話可以多看看這個工具,幾乎將瀏覽器都提取成 vue 可以用的形式。以你的例子來說只要 watch useWindowSize 回傳的 ref 就行了。