vue3 自定义指令如何注册并使用？

在 Vue 3 中，自定义指令允许开发者扩展 Vue 的功能，比如处理 DOM 操作、响应式数据绑定等。以下是自定义指令的基本步骤：

1. **创建指令**: 首先，你需要创建一个 JavaScript 函数，它接受两个参数 `el` 和 `binding`。`el` 是当前指令所作用的元素，`binding` 包含指令相关的属性信息。

const myDirective = {
  bind(el, binding, vnode) {
    // 初始化逻辑
  },
  update(el, binding, vnode) {
    // 更新逻辑
  },
  unbind(el, binding, vnode) {
    // 销毁逻辑（可选）
  }
};

2. **注册全局指令**:
如果你想在整个应用中都可以使用这个自定义指令，可以将其添加到 Vue 实例的 `$directives` 数组里。

   import { createApp } from 'vue';
   const app = createApp(App);
   app.directive('my-directive', myDirective);

3. **使用指令**:
在模板中使用 `<div v-my-directive>` 来标记要应用指令的地方。`v-` 前缀是 Vue 自带的指令前缀，你的自定义指令名紧跟其后。

例如，在模板上你可以这样做：

<div v-my-directive:value="someValue">这是一个有指令的元素</div>

这里的 `value` 就是你从 `binding` 对象中获取的属性名称。