Vue3如何使用Composition API定义无需全局注册的自定义指令？

你需要的实现方式完全可行，Vue3 针对 Composition API 场景原生支持组件局部注册自定义指令，无需在main.ts等入口文件做全局注册操作。

1. 自定义指令定义示例 #

自定义指令不是Vue组件，不需要用.vue后缀存储，建议存为.js/.ts格式文件，示例如下：

// @/directives/myDirective.ts
import type { Directive } from 'vue'

// 示例：自动给绑定元素添加边框、支持传参控制是否自动聚焦的指令
const myDirective: Directive = {
  // 指令首次绑定到元素时触发
  mounted(el, binding) {
    // 绑定元素添加默认边框
    el.style.border = '1px solid #409eff'
    // 如果传参不是false，自动聚焦
    if (binding.value !== false) {
      el.focus?.()
    }
  },
  // 绑定值更新时触发
  updated(el, binding) {
    if (binding.oldValue !== binding.value) {
      el.disabled = binding.value === false
    }
  },
  // 指令从元素上解绑时触发，清理副作用
  unmounted(el) {
    el.style.border = ''
  }
}

export default myDirective

2. 组件内导入使用 #

场景1：