请问如何在Vue3中实现自定义指令？

在 Vue 3 中，你可以使用 app.directive() 方法来注册一个全局自定义指令，或者你可以在组件的 directives 选项中注册局部自定义指令。以下是如何实现自定义指令的步骤：

全局自定义指令

全局自定义指令需要在应用实例上注册。这通常在应用的入口文件（如 main.js 或 main.ts）中完成。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

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

app.mount('#app');

在这个例子中，我们注册了一个名为 focus 的全局自定义指令。当指令所在的元素被插入到 DOM 中时，mounted 钩子函数会被调用，使该元素获得焦点。

局部自定义指令

你也可以在单个组件内注册局部自定义指令。这通过在组件的 directives 选项中完成。

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};
</script>

在这个例子中，focus 指令只在当前组件内有效。它的行为和全局注册的 focus 指令相同。

指令钩子函数

自定义指令可以定义多个钩子函数，如 beforeMount、mounted、beforeUpdate、updated、beforeUnmount 和 unmounted。这些钩子函数为指令在不同生命周期阶段提供了执行逻辑的机会。

例如，你可以使用 updated 钩子函数来在元素更新后执行某些操作：

app.directive('my-directive', {
  mounted(el) {
    // 元素被插入到 DOM 中时执行的逻辑
  },
  updated(el) {
    // 元素或其子元素更新后执行的逻辑
  },
  unmounted(el) {
    // 元素从 DOM 中移除时执行的清理逻辑
  }
});

指令参数和修饰符

自定义指令还可以接收参数和修饰符，使它们更加灵活和可重用。你可以在指令的名称后面添加一个冒号和一个参数名来传递参数，或者使用点语法来添加修饰符。

例如：

<template>
  <div v-my-directive:arg.modifier="value"></div>
</template>

在自定义指令的钩子函数中，你可以通过 binding 参数来访问这些值：

app.directive('my-directive', {
  mounted(el, binding) {
    console.log(binding.arg); // 输出 "arg"
    console.log(binding.modifiers.modifier); // 输出 true
    console.log(binding.value); // 输出绑定的值 "value"
  }
});