JavaScript指令是前端框架为扩展HTML功能设计的可复用行为封装机制；Vue通过v-指令及bind/inserted/update/componentUpdated/unbind钩子实现，Angular则用@Directive区分属性与结构指令并强调类型安全。
JavaScript 指令不是语言原生概念，而是前端框架（如 Vue、Angular）为扩展 HTML 功能而设计的**可复用行为封装机制**。它本质是一段 JS 逻辑，绑定到 DOM 元素上，在特定生命周期中执行，用来操作 DOM、响应数据变化或封装交互逻辑。
Vue 中如何自定义指令
Vue 提供 v- 开头的指令语法，支持全局或局部注册自定义指令。一个指令对象通常包含几个关键钩子函数：
- bind：指令第一次绑定到元素时调用（仅一次），适合做一次性初始化（如绑定事件监听器）
- inserted：元素插入父节点后调用（此时 DOM 已存在，可安全操作）
- update：所在组件更新时触发（但不保证子节点已更新）
- componentUpdated：组件及子节点都完成更新后调用
- unbind：指令解绑时调用（清理资源，如移除事件监听）
示例：写一个自动聚焦输入框的指令
// 全局注册
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})
// 使用
也可以用对象字面量简写（只写 inserted）或函数简写（只关心绑定后的逻辑）。
立即学习“Java免费学习笔记（深入）”；
Angular 中如何自定义指令
Angular 的指令分两类：属性指令（修改元素行为/外观，如 *ngIf）和 结构指令（改变 DOM 结构，如 *ngFor）。自定义指令一般用 @Directive 装饰器声明。
- 属性指令需注入
ElementRef和Renderer2安全操作 DOM - 通过
@Input()接收参数，@HostListener监听事件 - 必须在
NgModule.declarations中声明才能使用
示例：一个高亮点击元素的属性指令
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
@HostListener('click') onClick() {
this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow')
}
}
// 使用
两者核心区别与选型提示
- Vue 指令更轻量，API 简洁，侧重 DOM 行为增强，适合快速封装小功能（如防抖、权限控制、懒加载）
- Angular 指令更严格，强调类型安全与可测试性，结构指令底层用
ViewContainerRef和TemplateRef操作视图，适合复杂 UI 抽象 - 现代 Vue 3 推荐优先用组合式 API + 自定义 Hook 替代指令；Angular 则仍以指令为主要扩展方式
基本上就这些。指令不是黑魔法，而是把“对某个元素做什么”这个动作标准化、可复用化的过程。写得清楚、收得干净，就是好指令。
