Vue3组合式API：打造可复用自定义指令

Vue3组合式API实战：构建可复用的自定义指令系统

在Vue3的世界里，组合式API（Composition API）为开发者提供了更灵活、更强大的代码组织方式。今天，我们来聊聊如何利用组合式API构建一个可复用的自定义指令系统，让我们的开发效率更上一层楼。

为什么需要自定义指令？

自定义指令是Vue的强大特性之一，它允许我们直接操作DOM，实现一些特殊的交互效果。比如自动聚焦、权限控制、懒加载等场景，自定义指令都能派上用场。而在Vue3中，组合式API让自定义指令的创建变得更加优雅和可复用。

创建第一个组合式API指令

让我们以一个简单的自动聚焦指令为例，看看如何用组合式API实现：

• 首先，创建一个可复用的focus函数，接收el元素作为参数
• 在函数内部，使用nextTick确保DOM渲染完成后执行聚焦
• 返回一个对象，包含mounted和updated钩子，确保元素挂载和更新时都能正确聚焦

这种写法比Vue2的指令定义更加直观，逻辑也更清晰。我们可以将这个focus函数导出，在多个组件中复用。

更复杂的指令：权限控制

再来看看权限控制指令，这个场景在实际开发中非常常见。我们可以创建一个v-permit指令，根据用户权限决定是否显示元素：

• 指令接收权限字符串作为参数
• 在组合式函数中，通过useStore获取用户权限信息
• 根据权限对比结果，动态添加或移除元素的hidden样式

这里的关键是利用组合式API的响应式特性，当权限变化时，指令能自动更新DOM状态，无需手动监听。

指令的高级用法：参数与修饰符

自定义指令还可以支持参数和修饰符，让功能更强大。比如一个懒加载指令v-lazy，可以这样使用：

• v-lazy:img 表示懒加载图片
• v-lazy:video 表示懒加载视频
• v-lazy.once 表示只触发一次

在组合式函数中，我们可以通过binding.value和binding.modifiers获取这些信息，实现更灵活的控制逻辑。

总结

通过组合式API创建自定义指令，不仅代码更加模块化和可复用，还能充分利用Vue3的响应式特性。无论是简单的DOM操作，还是复杂的业务逻辑，都能优雅地封装成指令。下次遇到需要直接操作DOM的场景，不妨试试组合式API的方式，让代码既优雅又高效。