在 <script setup> 中定义以 v 开头的驼峰式变量（如 vFocus）即可注册局部自定义指令，其 mounted 钩子内可安全操作真实 DOM；支持传参、修饰符及 beforeUnmount 清理。
在 <script setup> 中配合自定义指令做 DOM 操作，核心是“声明即注册、挂载即生效”——不需要额外导出或调用，只要变量名以 v 开头（如 vFocus），Vue 就自动识别为局部指令，并在 mounted 钩子中安全操作真实 DOM。
直接定义 v- 开头的变量
这是最简洁的方式，适合单组件内轻量 DOM 行为（比如自动聚焦、高亮、滚动定位）。
- 变量名必须是驼峰式且以
v开头，例如vFocus、vScrollIntoView - 值是一个对象，至少包含
mounted钩子，接收el（原生 DOM 元素）作为第一个参数 - 模板中直接写
v-focus，不用加引号、括号或:修饰符（除非你主动支持）
示例：
<script setup>const vFocus = {
mounted(el) {
el.focus();
}
};
</script>
<template>
<input v-focus />
</template>
支持传参和修饰符的写法
当需要动态行为（比如聚焦后选中文本、根据值设置样式），靠 binding 参数就能实现。
立即学习“前端免费学习笔记（深入）”；
-
binding.value：获取绑定的值，如v-color="'blue'"→value是'blue' -
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 />
避免常见错误时机
DOM 操作必须等元素真正出现在页面上才能执行，否则会报错或无效。
-
created和beforeMount钩子中，el还没插入文档，不能调用.focus()或.scrollIntoView() -
mounted是默认且最安全的选择；如果涉及更新后逻辑（比如值变化要重置样式），才考虑updated - 不要在指令里访问
this或响应式数据——指令不参与响应式系统，只处理 DOM
需要清理时加上 beforeUnmount
如果指令内部添加了事件监听器、定时器或第三方库实例（比如拖拽、轮播），记得在卸载前清理，防止内存泄漏。
- 使用
beforeUnmount钩子移除事件或清除计时器 - 把监听器函数定义在外部或用
ref保存，确保能被正确引用和清除
示例（监听窗口大小）：
import { onBeforeUnmount } from 'vue';const vResize = {
mounted(el) {
const handler = () => el.textContent = window.innerWidth;
window.addEventListener('resize', handler);
el._resizeHandler = handler; // 临时存起来
},
beforeUnmount(el) {
window.removeEventListener('resize', el._resizeHandler);
}
};
