resize事件：
resize事件是改變窗口大小時發(fā)生的事件，可以在窗口開啟、最大化、最小化、窗口大小改變（如拖拉改變窗口大小、move語句改變窗口大小、改變width或height屬性以改變窗口大?。r發(fā)生。

1.監(jiān)聽瀏覽器窗口變化，實時獲取該窗口的寬度和高度

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

2.監(jiān)聽 resize 事件

//通過window監(jiān)聽
window.addEventListener('resize', getWindowInfo);
//缺點是會頻繁觸發(fā)這個事件，造成頁面卡頓，優(yōu)化的方法使用防抖或節(jié)流。

//優(yōu)化后的方法：
防抖debounce：在事件觸發(fā)n秒后再執(zhí)行，如果在n秒內又有新的觸發(fā)，就重新計算
節(jié)流throttle：連續(xù)事件觸發(fā)，在指定的時間內，不管觸發(fā)幾次，就只執(zhí)行一次

//使用防抖 (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);
	}
};
//觸發(fā)事件    觸發(fā)時間（指定時間內執(zhí)行事件）
const cancalDebounce = debounce(getWindowInfo, 500);
window.addEventListener('resize', cancalDebounce);

//vue3 使用生命周期銷毀鉤子
  onUnmounted(() => {
        console.log('onUnmounted','打印是否生效');
        //移除監(jiān)聽事件
        window.removeEventListener('resize', cancalDebounce);
   })

vue2和vue3的生命周期如下:

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

<script>
import { onMounted } from 'vue'  // 首先需要通過組合式API的方式把聲明周期鉤子引入項目

  export default {
    setup() {
      onMounted(() => {   // 在 setup 函數(shù)中，使用箭頭函數(shù)的方式使用。
        console.log('onMounted')
      })
    },
  }
</script>

vue3 生命周期執(zhí)行順序:文章來源地址http://www.zghlxwxcb.cn/news/detail-520532.html

<template>
  <div>
    <h1>content : {{num}}</h1>
    <el-button type="primary" @click="num++">num++</el-button>
  </div>
</template>
<script>
  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執(zhí)行了')

      return { num }
    },
  }
</script>
<style scoped>

</style>

到了這里，關于vue3 監(jiān)聽resize窗口事件,離開頁面要銷毀窗口事件。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！