vue3監(jiān)聽resize窗口事件(離開頁面要銷毀窗口事件)

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

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

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 函數中，使用箭頭函數的方式使用。
        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>

總結

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

您可能感興趣的文章: