Vue 教程：自定义指令的完整实现与典型应用场景

自定义指令是 Vue 提供的一种用于直接操作 DOM 的机制，它能够将可复用的 DOM 行为封装起来，解决组件模板中难以处理的底层交互问题。其典型应用场景包括自动聚焦、点击外部关闭、权限控制、滚动加载以及输入防抖等。使用自定义指令前，你需要具备 Vue 基础（如模板语法、组件概念）以及 Node.js 环境（建议版本 ^20.19.0 || >=22.12.0），并熟悉命令行操作。

核心概念与原理

Vue 是一个渐进式 JavaScript 框架，其核心库专注于视图层。指令本质上是在元素渲染和更新时提供一系列钩子函数（如 mounted、updated、unmounted），让开发者能在特定生命周期阶段执行 DOM 操作。自定义指令的核心价值在于将重复的 DOM 逻辑抽离，提升代码复用性与可维护性。

实战步骤与代码

1. 创建项目

在命令行中运行以下命令创建 Vue 项目（不要带上 $ 符号）：

npm create vue@latest

根据提示配置 TypeScript、Vue Router 等选项。

2. 注册局部指令

在组件中通过 directives 选项注册局部指令，实现输入框自动聚焦：

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus() // 元素挂载后自动聚焦
      }
    }
  }
}

模板中使用：<input v-focus />

3. 注册全局指令

在 main.js 中注册全局指令，实现按钮权限控制：

app.directive('permission', {
  mounted(el, binding) {
    const required = binding.value // 所需权限码
    const hasPermission = checkPermission(required) // 权限校验函数
    if (!hasPermission) {
      el.parentNode?.removeChild(el) // 无权限则移除元素
    }
  }
})

4. 实现防抖指令

利用 updated 钩子实现输入防抖，避免频繁请求：

app.directive('debounce', {
  mounted(el, binding) {
    let timer = null
    el.addEventListener('input', () => {
      clearTimeout(timer)
      timer = setTimeout(() => binding.value(), 500) // 500ms 后执行
    })
  }
})

常见坑点与优化

• 钩子函数命名：Vue 3 中钩子函数已重命名（如 bind 改为 mounted），使用旧 API 会导致指令失效。
• 内存泄漏：在 unmounted 钩子中务必移除事件监听器，避免 DOM 移除后仍被引用。
• 性能优化：避免在指令中执行复杂计算，必要时使用 updated 钩子配合条件判断减少不必要的 DOM 操作。
• 作用域隔离：指令中的 binding.value 是静态值，如需响应式数据，应传入对象或使用 binding.instance 访问组件实例。