快捷導(dǎo)航

vue3監(jiān)聽(tīng)resize窗口事件(離開(kāi)頁(yè)面要銷毀窗口事件)

更新時(shí)間：2023年11月02日 11:15:56 作者：淺淺一笑^*^

這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽(tīng)resize窗口事件(離開(kāi)頁(yè)面要銷毀窗口事件)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下

resize事件：

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

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

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

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

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

//優(yōu)化后的方法：

防抖debounce：在事件觸發(fā)n秒后再執(zhí)行，如果在n秒內(nèi)又有新的觸發(fā)，就重新計(jì)算

節(jié)流throttle：連續(xù)事件觸發(fā)，在指定的時(shí)間內(nèi)，不管觸發(fā)幾次，就只執(zhí)行一次

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

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

vue2和vue3的生命周期如下:

在這里插入圖片描述

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

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

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

vue3 生命周期執(zhí)行順序:

<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>

總結(jié)

到此這篇關(guān)于vue3監(jiān)聽(tīng)resize窗口事件(離開(kāi)頁(yè)面要銷毀窗口事件)的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽(tīng)resize窗口事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: