vue3 学习笔记13 – 生命周期和防抖节流
生命周期
- 创建周期(Composition API)
- setup(): 这不是生命周期钩子,但它是组合API的入口点,用于执行任何启动逻辑。
- 更新周期
-
onBeforeMount(): 在组件挂载之前调用,此时虚拟 DOM 已经准备好,但尚未渲染到页面上
-
onMounted(): 在组件挂载后调用,此时组件已经被添加到页面中,可以执行 DOM 操作或异步请求等操作。
-
onBeforeUpdate(): 在组件更新之前调用,可以用于准备更新前的数据状态。
-
onUpdated(): 在组件更新完成后调用,可以执行一些 DOM 操作。
-
- 卸载周期
-
onBeforeUnmount(): 在组件卸载之前调用,可以用来清理定时器或取消事件监听器等
-
onUnmounted(): 在组件卸载后调用,执行一些清理工作。
-
- 错误处理周期
- onErrorCaptured(): 在子组件抛出未捕获异常时调用,可以用来收集错误信息或者进行日志记录
onErrorCaptured((error, vm, info) => { console.error('Captured error:', error); });
- onErrorCaptured(): 在子组件抛出未捕获异常时调用,可以用来收集错误信息或者进行日志记录
防抖和节流
- utils/index.ts文件下封装使用
export function useDebounce(callback: Function, delay: number) {
let timer: NodeJS.Timeout | null = null;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
callback.apply(this, arguments);
}, delay);
};
}
export function useThrottle(callback: Function, delay: number) {
let throttling = false;
return function() {
if (!throttling) {
throttling = true;
setTimeout(() => {
callback.apply(this, arguments);
throttling = false;
}, delay);
}
};
}
防抖 (Debounce)
防抖函数用于延迟执行一个函数,直到一个连续动作的最后一次发生后,一段时间内没有新的动作产生。
- 组件中使用
<template>
<button @click="handleClick">Click me</button>
<p>Count: {{ count }}</p>
</template>
<script setup lang="ts">
import { useDebounce } from '../utils/debounce';
const count = ref(0);
const debouncedIncrement = useDebounce(() => {
count.value++;
}, 500); // 500ms 防抖
const handleClick = () => {
debouncedIncrement();
};
</script>
节流 (Throttle)
节流函数用于减少函数的调用频率,确保在一定时间内只执行一次。
- 组件中使用
<template>
<button @click="handleClick">Click me</button>
<p>Count: {{ count }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useThrottle } from '../utils/throttle';
const count = ref(0);
const throttledIncrement = useThrottle(() => {
count.value++;
}, 500); // 每500ms节流- 每500ms执行一次
const handleClick = () => {
throttledIncrement();
};
</script>