# lw_admin

**Repository Path**: gitee_lw/lw_admin

## Basic Information

- **Project Name**: lw_admin
- **Description**: 后台管理系统模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-01
- **Last Updated**: 2026-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

场景 1：监听异步数据，取消之前的请求（防抖）
```js
import { watchEffect, onCleanup } from 'vue'

watchEffect((onCleanup) => {
  const abortController = new AbortController()

  fetch('/api/data', { signal: abortController.signal })
    .then(res => res.json())
    .then(data => {
      // 处理数据
      console.log('收到数据:', data)
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('请求出错:', err)
      }
    })

  // 注册清理函数：当依赖变化或组件销毁时，取消之前的请求
  onCleanup(() => {
    abortController.abort()
    console.log('取消了之前的请求')
  })
})
```
✅ 作用：防止多个请求同时进行，避免“数据错乱”或“资源浪费”。

✅ 场景 2：注册 DOM 事件监听，自动移除
```js
watchEffect((onCleanup) => {
  const handler = (e) => {
    console.log('键盘按下:', e.key)
  }

  document.addEventListener('keydown', handler)

  // 注册清理函数：组件销毁或依赖变化时，移除监听
  onCleanup(() => {
    document.removeEventListener('keydown', handler)
    console.log('移除了键盘监听')
  })
})
```
✅ 作用：避免事件监听泄漏，尤其是在组件频繁切换的场景中。

✅ 场景 3：启动定时器，自动清除
```js
watchEffect((onCleanup) => {
  const timer = setInterval(() => {
    console.log('定时任务执行中...')
  }, 1000)

  // 注册清理函数：自动清除定时器
  onCleanup(() => {
    clearInterval(timer)
    console.log('定时器已清除')
  })
})
```
✅ 作用：防止定时器“一直跑”，造成性能问题或逻辑错误。