vue3 学习笔记13 -- 生命周期和防抖节流

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>