vue3自定义指令怎么写

### 创建和使用自定义指令

在 Vue 3 中，可以通过全局注册或局部注册的方式创建自定义指令。下面展示了两种方式的具体实现方法。

#### 全局注册自定义指令

为了使自定义指令可以在任何组件中使用，可以将其作为插件来注册：

import { createApp } from 'vue'
const app = createApp(App)

// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

这段代码会在应用启动时自动给所有带有 `v-focus` 的元素调用 `.focus()` 方法[^1]。

#### 局部注册自定义指令

如果只需要在一个特定的组件内使用该指令，则可以选择局部注册：

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  },
  // ...
}

这种方式使得只有在这个组件的作用域内的模板才能访问到这个名为 `v-focus` 的指令。

#### 自定义指令钩子函数

除了 `mounted` 钩子外，还可以利用其他几个生命周期钩子来自定义行为:

- **beforeMount**: 在绑定元素插入父节点之前被调用。
- **mounted**: 当绑定元素插入其父节点之后立即调用此钩子。
- **updated**: 组件更新完成后会触发此事件；注意此时 DOM 可能尚未同步完成。
- **componentUpdated**: 同步后的组件更新周期结束时执行的操作。
- **unmounted**: 指令与元素解绑时触发。

这些钩子允许更精细地控制何时以及如何修改 DOM 节点的行为。

app.directive('colorize', {
  beforeMount() {},
  mounted(el, binding) {
    el.style.color = binding.value || 'red';
  },
  updated() {},
  componentUpdated() {},
  unmounted() {}
});

上述例子中的 `v-colorize` 将根据传递的颜色值改变文本颜色，默认情况下为红色。