b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
3.2 KiB
3.2 KiB
name, description
| name | description |
|---|---|
| lifecycle-hooks | Run code at specific stages of component lifecycle |
Lifecycle Hooks
Execute code at specific stages of a component's lifecycle.
Common Lifecycle Hooks
<script setup lang="ts">
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
// Before DOM is mounted
onBeforeMount(() => {
console.log('before mount')
})
// After DOM is mounted (most common)
onMounted(() => {
console.log('mounted')
// Safe to access DOM, make API calls, start timers
})
// Before reactive state change causes re-render
onBeforeUpdate(() => {
console.log('before update')
})
// After DOM re-render
onUpdated(() => {
console.log('updated')
})
// Before component unmounts
onBeforeUnmount(() => {
console.log('before unmount')
})
// After component unmounts
onUnmounted(() => {
console.log('unmounted')
// Cleanup: remove listeners, cancel timers, etc.
})
</script>
Lifecycle Diagram
Creation:
setup() → onBeforeMount → onMounted
Updates:
onBeforeUpdate → onUpdated
Destruction:
onBeforeUnmount → onUnmounted
Common Patterns
DOM Access
import { ref, onMounted } from 'vue'
const inputRef = ref<HTMLInputElement | null>(null)
onMounted(() => {
// DOM is available
inputRef.value?.focus()
})
API Calls
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
const response = await fetch('/api/data')
data.value = await response.json()
})
Cleanup
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
Timer Cleanup
import { onMounted, onUnmounted } from 'vue'
let timer: ReturnType<typeof setInterval>
onMounted(() => {
timer = setInterval(() => {
// ...
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
Less Common Hooks
import {
onActivated, // Component kept alive is activated
onDeactivated, // Component kept alive is deactivated
onErrorCaptured, // Error from descendant captured
onRenderTracked, // Debug: reactive dependency tracked
onRenderTriggered // Debug: re-render triggered
} from 'vue'
SSR Hooks
import { onServerPrefetch } from 'vue'
// Only runs during server-side rendering
onServerPrefetch(async () => {
data.value = await fetchData()
})
Important Notes
- Hooks must be called synchronously during
setup():
// ❌ Won't work
setTimeout(() => {
onMounted(() => {})
}, 100)
// ✅ Works
onMounted(() => {
setTimeout(() => {}, 100)
})
- Can call from external functions if called synchronously from setup:
// composable.ts
export function useFeature() {
onMounted(() => {
// This works if useFeature is called synchronously in setup
})
}
- Multiple calls are allowed - all callbacks will be invoked:
onMounted(() => console.log('first'))
onMounted(() => console.log('second'))
// Both will run