在 Vue 中，自定义指令是如何定义的？请结合实例说明自定义指令的常见使用场景。
考察说明
考查对 Vue 自定义指令概念和典型应用场景的理解，以及能否用实例说明。
回答思路
- 【回答框架 1】自定义指令是 Vue 提供的一种复用 DOM 操作的机制，通过 Vue.directive 或组件内 directives 选项注册，可以绑定到元素上，在元素插入、更新、移除时执行相应钩子函数。
- 【回答框架 2】常见钩子包括 bind、inserted、update、componentUpdated、unbind，分别对应指令绑定、元素插入、更新、更新后和卸载时机。钩子参数有 el、binding、vnode 等，可操作 DOM、读取绑定值或修饰符。
- 【回答框架 3】典型场景包括权限控制（如根据权限隐藏按钮）、表单自动聚焦、点击外部关闭下拉、滚动加载、文字复制、水印注入、拖拽等。这些场景都适合用指令封装，避免重复代码。
- 【回答框架 4】使用自定义指令时需注意指令的封装边界，尽量保持指令职责单一，避免过度依赖全局状态，且要合理管理事件监听和资源清理。
- 【关键点 1】自定义指令通过钩子函数操作 DOM，适合封装低层 DOM 行为。
- 【关键点 2】权限控制、自动聚焦、点击外部关闭、滚动加载、复制指令是常见应用。
- 【关键点 3】指令应独立、可复用，不依赖全局状态，并在卸载时清理事件。
- 【易错点 1】权限控制指令容易与业务解耦不彻底，应结合路由或接口校验，不能仅前端隐藏。
- 【易错点 2】指令内绑定事件后忘记解绑会造成内存泄漏。
- 【易错点 3】过度使用指令会让代码难以调试，应优先考虑组件或组合式函数。