vue3+ts+vite监听窗口变化+生命周期对比+防抖节流优化

一. 监听窗口变化

---

1.监听窗口变化

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script lang="ts" setup>
	import { onMounted, onUnmounted } from 'vue';
	const handleResize = () => {
	      // 处理窗口变化的逻辑
	    };
	onMounted(() => {
	      window.addEventListener('resize', handleResize);
	    });
	onUnmounted(() => {
	      window.removeEventListener('resize', handleResize);
	    });
        
</script>

上面我们定义了一个名为 handleResize 的函数来处理窗口变化的逻辑。然后，在onMounted钩子函数中使用window.addEventListener来监听窗口的resize事件，并在事件发生时调用handleResize函数。最后，在onUnmounted钩子函数中使用window.removeEventListener来移除事件监听器。

2.要监听视口宽度，可以使用 Vue3 提供的 watchEffect 函数，结合 window.innerWidth 属性来实现。

<script setup lang="ts">
	import { watchEffect } from 'vue';
	watchEffect(() => {
	    const width = window.innerWidth;
	    console.log('视口宽度：', width);
	  });
</script>

---

二.其他问题相关:生命周期

---

1.周期对比图

---

2.下图为vue2中生命周期的流程图，vue3大同小异,名称改变哈就是

---

三:防抖函数/节流函数

• 方法介绍方法：
  防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算(只执行最后一次)
  节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次
• 原因:
  resize事件
  resize事件是改变窗口大小时发生的事件，可以在窗口开启、最大化、最小化、窗口大小改变（如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小）时发生
  ----优化后方案 如下 -----

<script lang="ts" setup>
	import { onMounted, onUnmounted } from 'vue';
	const handleResize = () => {
	      // 处理窗口变化的逻辑
	    };
	 //防抖函数
	const debounce=(fn,delay){
		let timer
		return function(){
			if(timer){
				clearTimeout(timer)
			}
			timer=setTimeout(()=>{
	 			fn()
			},delay)
		}
	} 
	//触发事件
	const cancelDebounce=debounce(handleResize ,300)
	onMounted(() => {
	      window.addEventListener('resize', cancelDebounce);
	    });
	onUnmounted(() => {
	      window.removeEventListener('resize', cancelDebounce);
	    });
        
</script>

ps:上面卸载事件在onUnmounted中,也可以在onBeforeUnmount中,-----

我欲乘风归去,又恐琼楼玉宇