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使用生命周期钩子例子:
<script>
import { onMounted } from 'vue' // 首先需要通过组合式API的方式把声明周期钩子引入项目
export default {
setup() {
onMounted(() => { // 在 setup 函数中，使用箭头函数的方式使用。
console.log('onMounted')
})
},
}
</script>
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')
})
console.log('setup执行了')
return { num }
},
}
</script>
<style scoped>
</style>
