mounted钩子是实现页面加载后自动聚焦的最常用方式，因dom仅在挂载后可用，需用el?.focus()确保安全，支持delay等修饰符，全局或局部注册均可，扩展功能需配合unmounted清理资源。
直接用 mounted 钩子就能实现页面加载后自动聚焦，这是最常用也最稳妥的方式。Vue3 中不再支持 Vue2 的 inserted，所有 DOM 操作都应放在 mounted 之后的生命周期里。
聚焦指令必须用 mounted
元素只有在挂载到真实 DOM 后才能调用 .focus()，created 或 beforeMount 阶段 DOM 尚未生成，调用会报错或无效。
-
mounted(el)：确保 el 已插入文档，可安全调用el.focus() - 避免使用
el.querySelector('input')等额外查找——指令已绑定到目标元素，el就是它本身 - 加可选链操作符
el?.focus()防止极端情况（如元素被提前移除）引发异常
支持修饰符的增强写法
比如想让聚焦延迟执行，或只在特定条件下触发，可以用修饰符和 binding 参数区分逻辑：
-
v-focus.delay→ 在mounted中用setTimeout延迟聚焦 -
v-focus.immediate→ 立即聚焦（默认行为），也可配合binding.value控制是否启用 -
binding.modifiers是个对象，delay存在即为true，无需取值
全局注册与局部注册写法
两种方式结构一致，只是注册位置不同，钩子函数写法完全一样：
- 全局注册（main.ts）：
app.directive('focus', { mounted: el => el?.focus() }) - 局部注册（组件内）：
const vFocus = { mounted: el => el?.focus() }，再在setup的directives选项中引入 - 组合式 API 中推荐用
const vFocus = { mounted: ... }形式，语义清晰且易复用
需要 cleanup 的场景要配 unmounted
如果指令内部启用了定时器、事件监听或第三方库实例（如 Waves.init()），必须在组件卸载前清理，否则造成内存泄漏：
- 在
mounted中保存定时器 ID 或事件监听器引用（如el.__timer__ = setTimeout(...)） - 在
unmounted钩子里清除：clearTimeout(el.__timer__)或removeEventListener - 聚焦指令本身通常不需要 cleanup，但扩展功能（如自动轮播、倒计时提示）就需要配套处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
