通常情况下Vue内置指令能满足大部分需求，但遇到特殊场景时却捉襟见肘。Vue自定义指令可以解决大部分平时的需求。

核心价值：

1. 精准操作DOM：直接访问底层元素，实现复杂交互
2. 逻辑复用利器：跨组件复用代码，避免重复造轮子
3. 声明式封装：将DOM操作封装成可读性强的指令

核心用法

1基础操作（全局/局部指令）

全局注册（适合通用功能）：

// 自动聚焦指令
Vue.directive('focus', {
  inserted: el => el.focus()
})

局部注册（适合组件专用）：

export default {
  directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value
      }
    }
  }
}

实战场景解析

场景1：图片懒加载（性能优化）

Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

使用方式：<img v-lazy="imageUrl">

场景2：权限校验（安全控制）

Vue.directive('permission', {
  inserted(el, binding) {
    const hasPermission = checkUserPermission(binding.value)
    if(!hasPermission) el.parentNode.removeChild(el)
  }
})

使用方式：<button v-permission="'admin'">删除</button>

场景3：拖拽指令（复杂交互）

Vue.directive('drag', {
  inserted(el) {
    let isDragging = false
    el.addEventListener('mousedown', () => isDragging = true)
    document.addEventListener('mouseup', () => isDragging = false)
    document.addEventListener('mousemove', (e) => {
      if(isDragging) {
        el.style.left = e.clientX + 'px'
        el.style.top = e.clientY + 'px'
      }
    })
  }
})

使用方式：<div v-drag class="dialog"></div>

底层原理

1. 编译阶段：模板解析时识别指令属性，生成对应渲染函数
2. Patch过程：创建DOM时调用invokeCreateHooks触发指令钩子
3. 响应式更新：依赖收集机制确保数据变化触发update钩子
4. 内存管理：组件销毁时自动触发unbind清理资源

高频面试题精选

1. v-model如何用指令实现？

Vue.directive('model', { 
  bind(el, binding, vnode) {
    el.value = binding.value 
    el.addEventListener('input', e => { 
      vnode.context[binding.expression] = e.target.value
    })
  }
})

2. 自定义指令能访问Vue实例吗？
   答：通过第三个参数 vnode.context 获取当前组件实例
3. 动态指令参数如何实现？

<div v-demo:[dynamicArg]="value"></div>
// 通过binding.arg获取动态参数

4. Vue2和Vue3指令差异？

5. 指令性能优化技巧

• 避免在update钩子进行重计算
• 使用requestAnimationFrame优化频繁DOM操作
• 及时在unbind中移除事件监听

看再多比不上手动操作一次，有兴趣的同学可以根据上面的代面手动敲一敲，增加一下手感，下次实践中获取就有更巧妙的操作。