自定义指令本质是为HTML元素声明式添加DOM行为，适用于单元素操作场景（如自动聚焦、权限控制），应优先于methods/computed；模板中支持v-xxx、v-xxx="value"、v-xxx:arg.modifier三种写法；Vue3钩子更贴近组件生命周期，需按需选用mounted/beforeUnmount等，并注意全局与局部注册的适用边界。
Vue 模板中使用自定义指令，本质是给 HTML 标签“加能力”——不写 JS 逻辑，只靠一个 v-xxx 属性，就能让元素自动聚焦、变色、隐藏、甚至响应权限变化。关键不在“怎么写”，而在于“什么时候该用它”和“怎么写得干净可靠”。
什么时候该用自定义指令而不是 methods 或 computed
当操作目标明确指向**单个 DOM 元素本身**，且行为与 Vue 响应式数据无强绑定时，指令比在 mounted 中手动查元素更合适。比如：
- 输入框加载后自动获取焦点（
v-focus） - 按钮根据用户权限决定是否渲染（
v-permission="['edit']"） - 图片加载失败时显示默认占位图（
v-img-fallback） - 点击区域外自动关闭下拉菜单（
v-click-outside）
如果逻辑涉及多个组件状态联动、需要响应数据变更重新计算，那就该用计算属性或 watch，而不是硬塞进指令里。
模板中怎么写才正确又灵活
自定义指令在模板中的写法和内置指令一致，但支持三种传参方式，组合起来很实用：
-
基础用法：
—— 无参数，纯行为增强 -
传值（value）：
—— binding.value 就是字符串'#409eff' -
传参数（arg） + 修饰符（modifiers）：
——delete是 arg，.prevent是 modifiers，可在钩子中通过binding.arg和binding.modifiers.prevent访问
注意：指令名用短横线分隔（v-click-outside），注册时用驼峰（clickOutside），Vue 会自动转换。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
钩子函数选哪个？Vue 2 和 Vue 3 差在哪
钩子决定指令“什么时候干活”。Vue 3 的命名更贴近组件生命周期，也更直观：
-
beforeMount（Vue 2 的bind）：元素还没进 DOM，适合绑定事件监听器或初始化配置 -
mounted（Vue 2 的inserted）：元素已挂载，能安全调用el.focus()、el.scrollIntoView()等 -
updated（Vue 2 的componentUpdated）：响应式数据更新后，DOM 已重绘，适合同步样式或位置 -
beforeUnmount和unmounted：必须清理定时器、事件监听器，防止内存泄漏
例如权限指令，通常用 mounted 判断并移除节点；而防抖指令，就得在 beforeUnmount 清掉 pending 定时器。
全局注册 vs 局部注册怎么选
注册方式影响复用范围和打包体积：
-
全局注册（
app.directive('focus', {...})）：适合高频、跨项目复用的通用能力，如v-focus、v-permission -
局部注册（组件内
directives: { clickOutside: {...} }）：适合仅本组件使用的定制逻辑，避免污染全局命名空间，也利于 Tree-shaking
建议：把真正通用、无副作用的指令设为全局；带业务上下文或依赖特定 store 状态的，优先局部注册，必要时通过 binding.instance 访问当前组件实例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
