resize事件：

resize事件���改变窗口大小时发生的事件，可以在窗口开启、最大化、最小化、窗口大小改变（如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小）时发生。

1.监听浏览器窗口变化，实时获取该窗口的宽度和高度

//封装getWindowInfo()方法const getWindowInfo = () => {const windowInfo = {width: window.innerWidth,hight: window.innerHeight}console.log(windowInfo);};

2.监听 resize 事件

//通过window监听window.addEventListener('resize', getWindowInfo);//缺点是会频繁触发这个事件，造成页面卡顿，优化的方法使用防抖或节流。

//优化后的方法：

防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算

节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次

//使用防抖 (setTimeout定时器)const getWindowInfo = () => {const windowInfo = {width: window.innerWidth,hight: window.innerHeight}};const debounce = (fn, delay) => {let timer;return function() {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn();}, delay);}};//触发事件    触发时间（指定时间内执行事件）const cancalDebounce = debounce(getWindowInfo, 500);window.addEventListener('resize', cancalDebounce);

//vue3 使用生命周期销毁钩子  onUnmounted(() => {        console.log('onUnmounted','打印是否生效');        //移除监听事件        window.removeEventListener('resize', cancalDebounce);   })

vue2和vue3的生命周期如下:

vue3使用生命周期钩子例子:

import { onMounted } from 'vue'  // 首先需要通过组合式API的方式把声明周期钩子引入项目  export default {    setup() {      onMounted(() => {   // 在 setup 函数中，使用箭头函数的方式使用。        console.log('onMounted')      })    },  }

vue3 生命周期执行顺序:

      
content : {{num}}
    num++    import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, ref } from 'vue'  export default {    setup() {      const num = ref(0)      onBeforeMount(() => {        console.log('onBeforeMount')      })      onMounted(() => {        console.log('onMounted')      })      onBeforeUpdate(() => {        console.log('onBeforeUpdate')      })      onUpdated(() => {        console.log('onUpdated')      })      onBeforeUnmount(() => {        console.log('onBeforeUnmount')      })      onUnmounted(() => {        console.log('onUnmounted')      })      onErrorCaptured(() => {        console.log('onErrorCaptured')      })      console.log('setup执行了')      return { num }    },  }