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

本文主要介绍Vue3中自定义指令和钩子函数的使用方法和它们之间的关系。

自定义指令

在 Vue3 中，自定义指令是一种用于扩展 Vue 的模板语法的方式。自定义指令实际上是一种特殊的属性，可以通过 v- 前缀来应用。

自定义指令能够为元素添加行为，例如将输入框聚焦、滚动到指定位置、懒加载等等，同时可以在指令绑定和解绑时执行一些逻辑，也可以接收参数和修饰符来进行更灵活的控制。

在 Vue3 中，自定义指令通过 directive 函数来定义，在 setup 函数中作为返回值暴露出来，这样就可以在模板中使用。

示例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': defineDirective((el) => {
      el.addEventListener('input', (e) => {
        const value = e.target.value
        e.target.value = value.replace(/\D/g, '')
      })
    })
  }
}
</script>

在这个例子中，我们定义了一个自定义指令 v-number-only，使用 defineDirective 方法创建了一个钩子函数 el，在该钩子函数中监听输入框的输入事件，并在事件触发时将非数字字符替换为空字符。在模板中使用该指令即可实现只能输入数字的功能。

钩子函数

在 Vue3 中，钩子函数（hook functions）是一种用于在组件生命周期中执行特定操作的函数。类似于 Vue2 中的生命周期钩子，在 Vue3 中也提供了一些特定的钩子函数，可以在组件的不同生命周期阶段中执行一些逻辑。

在 Vue3 中，组件的钩子函数可以放在 setup 函数中，通过直接定义函数来实现。常用的钩子函数包括：

• beforeCreate：在组件实例化之前执行。
• created：在组件实例化之后执行，但是数据观测和事件/生命周期钩子等未挂载。
• beforeMount：在组件挂载之前执行。
• mounted：在组件挂载之后执行。
• beforeUpdate：在组件更新之前执行。
• updated：在组件更新之后执行。
• beforeUnmount：在组件卸载之前执行。
• unmounted：在组件卸载之后执行。

举个例子，下面是一个在 Vue3 中使用钩子函数实现页面标题自动切换的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';

export default {
  setup() {
    const title = ref('Welcome to the Page!');
    
    const changeTitle = () => {
      title.value = 'New Title';
    };
    
    const updatePageTitle = (newTitle) => {
      document.title = newTitle;
    };
    
    onMounted(() => {
      updatePageTitle(title.value);
    });
    
    onBeforeUnmount(() => {
      updatePageTitle('Goodbye!');
    });
    
    return {
      title,
      changeTitle
    };
  }
}
</script>

在上面的代码中，我们使用 onMounted 和 onBeforeUnmount 钩子函数来在组件挂载和卸载时更新页面的标题。在 setup 函数中定义了 title 和 changeTitle 变量，onMounted 函数在组件挂载时调用 updatePageTitle 函数更新页面标题为组件标题，onBeforeUnmount 函数在组件卸载时调用 updatePageTitle 函数更新页面标题为“Goodbye!”。

自定义指令与钩子函数的关系

在 Vue3 中，自定义指令和钩子函数密切相关。

自定义指令是一种在模板中直接操作 DOM 的方法，可以在组件中定义具有特定行为的指令，并在模板中使用它们来实现某些功能。

钩子函数是在生命周期中执行的函数，可以在组件的不同阶段执行特定的操作。自定义指令可以在钩子函数中定义和使用。

自定义指令的实现方式与 Vue2 中有些不同。Vue3 中，自定义指令不再具有 bind 和 update 钩子函数。

关于自定义指令和钩子函数的关系，可以简单理解为：

• 自定义指令是一个对象，其中包含了一系列钩子函数（生命周期函数）；
• 钩子函数是自定义指令的一部分，它们在指令的生命周期中被触发，从而实现相关的功能。

例如，可以创建一个名为myDirective的自定义指令，具有beforeMount和mounted钩子函数。在模板中引用该指令可以这样写：

<div v-myDirective>自定义指令内容</div>

在代码中实现该指令可以这样写：

const myDirective = {
  beforeMount(el, binding, vnode, prevVnode) {
    // 在绑定元素的父组件被挂载之前调用
  },
  mounted(el, binding, vnode, prevVnode) {
    // 在绑定元素的父组件被挂载后调用
  }
}

const app = createApp({})
app.directive('myDirective', myDirective)

以上示例中，myDirective是自定义指令的名称，beforeMount和mounted是该指令的钩子函数。createApp({})用于创建 Vue3 实例，app.directive('myDirective', myDirective)用于将自定义指令注册到该实例中。