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

防抖和节流

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