useWindowResize
这个一个经典的 hook 例子，窗口尺寸发生改变，与其他功能代码无关，可以抽为单独的 hook 。
使用到 Vue3 的新特性
1. ref
使用它来保存响应式变量 width 、 height 的值。
2. onMounted
生命周期函数，用来给 window 绑定 resize 事件监听。
3. onUnmounted
生命周期函数，用来给 window 取消绑定 resize 事件监听。
完整 hook 代码
/src/hooks/useWindowResize.ts
import { onMounted, onUnmounted, ref } from "vue";
function useWindowResize() {
const width = ref(0);
const height = ref(0);
function onResize() {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
onMounted(() => {
window.addEventListener("resize", onResize);
onResize();
});
onUnmounted(() => {
window.removeEventListener("resize", onResize);
});
return {
width,
height
};
}
export default useWindowResize;
使用 useWindowResize
/src/App.vue
<template>
<div id="app">
<h1>{{ count }}</h1>
<button @click="plus">plus</button>
<h1>屏幕尺寸：</h1>
<div>宽度：{{ width }}</div>
<div>高度：{{ height }}</div>
</div>
</template>
<script lang="ts">
import { ref, watch } from "vue";
import useWindowResize from "./hooks/useWindowResize";
export default {
name: "App",
setup() {
const count = ref(0);
function plus() {
count.value++;
}
watch(count, () => {
document.title = "update: " + count.value;
});
const { width, height } = useWindowResize();
return {
count,
plus,
width,
height
};
}
};
</script>
