Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated

示例1

举个例子，下面是一个在 Vue3 中使用自定义指令实现输入框聚焦的示例：

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

<script>
import { directive } from 'vue';

const focus = directive((el) => {
 el.focus();
});

export default {
 directives: {
 focus
 }
}
</script>

在上面的代码中，我们定义了一个名为 focus 的自定义指令，并将其注册在组件的 directives 选项中，在模板中使用 v-focus 应用该指令就可以实现输入框聚焦的功能。

示例2

以下是一个使用自定义指令函数的例子。假设有一个需求，输入框中只能输入数字，其他字符输入无效。我们可以通过自定义指令来实现这个功能。

<template>
  <div>
    <input v-number-only type="text" v-model="value" />
  </div>
</template>

<script>
import { defineDirective } from 'vue'

export default {
 setup() {
 const value = ref('')

 return {
 value,
 }
 },
 directives: {
 'number-only': defineDirect