自定义指令的设计原则 ​

Vue 2 和 Vue 3 的自定义指令区别 ​

Vue 3 的自定义指令在语法上与 Vue 2 的指令有一些不同，但核心概念和使用方式仍然相似。Vue 3 引入了 Composition API，并对指令的钩子函数进行了更细粒度的划分，提供了更灵活和可控的指令编写方式。以下是 Vue 2 和 Vue 3 的自定义指令之间的主要区别：

注册方式 ​

• Vue 2：

在 Vue 2 中，使用全局的 Vue.directive 方法来注册自定义指令。指令名称作为第一个参数，指令配置对象作为第二个参数。

• Vue 3：

在 Vue 3 中，可以使用全局的 app.directive 方法或 directive 函数来注册自定义指令。指令名称作为第一个参数，指令配置对象作为第二个参数。

指令钩子函数 ​

• Vue 2：

Vue 2 的指令钩子函数包括 bind、inserted、update、componentUpdated 和 unbind。这些钩子函数在指令的生命周期中不同的阶段被调用。

• Vue 3：

Vue 3 的指令钩子函数包括 beforeMount、mounted、beforeUpdate、updated、beforeUnmount 和 unmounted。这些钩子函数提供了更细粒度的控制，并与组件的生命周期钩子函数保持一致。

钩子函数参数 ​

• Vue 2：

Vue 2 的指令钩子函数的参数包括 el、binding、vnode 和 oldVnode。其中，binding 对象中包含了指令的绑定值、参数、修饰符等信息。

• Vue 3：

Vue 3 的指令钩子函数的参数也包括 el、binding、vnode 和 prevVnode。prevVnode 是之前的虚拟节点，用于在更新钩子函数中进行比较。

指令修饰符 ​

• Vue 2：

Vue 2 的指令修饰符可以通过 v- 前缀使用，例如 v-on:click.stop。Vue 2 提供了一些内置的事件修饰符，如 .stop、.prevent、.capture、.self 等。

• Vue 3：

Vue 3 的指令修饰符不再使用 v- 前缀，而是直接在指令后面使用，例如 @click.stop。Vue 3 内置的事件修饰符仍然可用，但要与 @ 符号一起使用。

常见的自定义指令应用场景 ​

...