Vue 3 中自定义指令需明确注册方式和调用时机：局部注册在 <script setup> 中定义 vXxx 变量或选项式 API 的 directives 选项中声明；必须使用 mounted 钩子操作 DOM；支持传参、修饰符及动态行为，但不可访问 this 或响应式系统。
在 Vue 3 单文件组件（SFC）中使用自定义指令，核心是明确注册方式和调用时机。v-focus 这类指令本质是操作真实 DOM 的轻量封装，不需要额外依赖或响应式逻辑，关键在于“在哪注册”和“何时生效”。
局部注册：只在当前组件内生效
适合功能单一、复用范围小的场景，比如仅某个表单页需要自动聚焦输入框。
- 在 <script setup> 中直接定义变量，名称以 v- 开头（如
vFocus），Vue 会自动识别为指令 - 指令对象至少包含 mounted 钩子，确保 DOM 已挂载再操作
- 模板中直接使用
v-focus，无需加引号或括号
示例：
<script setup>const vFocus = {
mounted(el) {
el.focus();
}
};
</script>
<template>
<input v-focus />
</template>
选项式 API 中注册：结构清晰，便于维护
如果你使用的是 export default { ... } 形式，指令需放在 directives 选项里。
立即学习“前端免费学习笔记（深入）”；
-
directives是一个对象，键名即指令名（去掉v-前缀），值为指令定义对象 - 每个钩子函数接收
el（原生 DOM 元素）作为第一个参数，可直接调用.focus()、.scrollIntoView()等方法 - 避免在
created或beforeMount中操作 DOM，此时元素尚未插入文档
示例：
<script>export default {
directives: {
focus: {
mounted(el) {
el.focus();
}
}
}
};
</script>
传参与修饰符：让指令更灵活
v-focus 不只是“一按就聚焦”，还能根据绑定值或修饰符动态行为。指令的 binding 参数提供了完整上下文。
-
binding.value：接收模板中传递的值，例如v-focus="'password'"→ value 是字符串'password' -
binding.arg：获取冒号后的参数，如v-focus:select→ arg 是'select'，可用于触发选中全部文本 -
binding.modifiers：获取点号修饰符，如v-focus.lazy→ modifiers 是{ lazy: true }，可控制聚焦时机
进阶示例（聚焦后自动选中文本）：
const vFocus = {mounted(el, binding) {
el.focus();
if (binding.arg === 'select') {
el.select();
}
}
};
模板中写成：<input v-focus:select />
注意事项：避免常见坑
指令看似简单，但容易因时机或作用域出错。
- 不要在
updated钩子里反复调用focus()，否则每次数据更新都会抢焦点，影响用户体验 - 如果指令涉及事件监听（如拖拽、滚动），务必在
beforeUnmount中移除监听器，防止内存泄漏 - 局部指令无法被子组件继承，父子组件间不共享；若多个组件都需要，优先考虑全局注册
- 指令不能访问组件实例的
this，也不参与响应式系统，所有逻辑必须基于传入的el和binding
