vue3 监听resize窗口事件,离开页面要销毁窗口事件。_vue3 resize

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

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

//封装getWindowInfo()方法
const getWindowInfo = () => {
	const windowInfo = {
		width: window.innerWidth,
		hight: window.innerHeight
	}
	console.log(windowInfo);
};
1
2
3
4
5
6
7
8

2.监听 resize 事件

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

//优化后的方法：
防抖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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

vue2和vue3的生命周期如下:

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

<script>
import { onMounted } from 'vue'  // 首先需要通过组合式API的方式把声明周期钩子引入项目

  export default {
    setup() {
      onMounted(() => {   // 在 setup 函数中，使用箭头函数的方式使用。
        console.log('onMounted')
      })
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11

vue3 生命周期执行顺序:

<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')
      })

    //onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
    onActivate(()=>{
     console.log('onActivate,被激活的时候使用')
    })
    //onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行
    onDeactivated(()=>{
      console.log('onDeactivated,切换组件时使用')
     })
      console.log('setup执行了')

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

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60