在 Vue.js 中，自定义指令是一种强大的工具，可以让你将一些功能封装成一个可重用的组件。Vue 提供了一些内置指令（如 v-model 和 v-if），但有时你需要根据特定需求扩展这些功能。通过自定义指令，你可以轻松地将 DOM 操作逻辑封装到一个可复用的函数中。
定义一个自定义指令
局部注册
局部注册自定义指令是在某个特定的组件内部进行的。这样做的好处是，这个指令只会在这个组件中生效。
-- -------------------- ---- -------
------ ------- -
----------- -
------ -
-- ---------- --- ----
--------- -------- ---- -
-- ----
----------
-
-
--
--------- -
---------------------------
-
-在上面的例子中，我们定义了一个名为 focus 的指令。当这个指令所在的元素插入到 DOM 中时，该元素就会自动获得焦点。
全局注册
全局注册自定义指令意味着这个指令可以在整个应用中的任何组件中使用。
-- -------------------- ---- -------
------ - --------- - ---- ------
----- --- - ---------------
---------------------- -
--------- -------- ---- -
----------
-
---
------------------全局注册指令的方式非常简单，只需要在创建 Vue 应用实例后调用 directive 方法即可。
指令的钩子函数
每个自定义指令对象都有几个钩子函数（生命周期钩子），它们会被 Vue 在不同的时机调用。这些钩子函数接收以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下属性：value：传递给指令的值。例如，v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。expression：字符串形式的指令表达式。例如，在v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数。例如，v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如，在v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。详情请参考 VNode API。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
主要钩子函数
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind(el, binding, vnode) {
console.log('指令已绑定');
}inserted
被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
inserted(el, binding, vnode) {
console.log('元素被插入到父节点');
}update
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较前后两个值来忽略不必要的模板更新（详细的钩子函数参数见下文）。
update(el, binding, vnode) {
console.log('组件的 VNode 更新了');
}componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated(el, binding, vnode) {
console.log('组件及其子组件的 VNode 已全部更新');
}unbind
只调用一次，指令与元素解绑时调用。
unbind(el, binding, vnode) {
console.log('指令与元素解绑');
}使用修饰符
修饰符是由点表示法指示的特殊后缀，用于指定自定义指令的行为。
<input v-focus.trim>
在上面的例子中，trim 是一个修饰符，它会调用 vnode.context.$options.directives.focus.bind 函数，并且将 trim 作为第二个参数传递给 binding.modifiers。
内联表达式作为修饰符
你也可以在自定义指令中使用内联表达式作为修饰符，这样可以根据需要动态地调整行为。
<input v-focus="true">
在这个例子中，v-focus 的行为可以通过 true 或 false 来控制。
综合示例
下面是一个综合示例，展示了如何定义和使用自定义指令。
-- -------------------- ---- -------
-- -------
------ - --------- - ---- ------
------ --- ---- ------------
----- --- - ---------------
---------------------- -
------------ -
-----------
--
---------- -------- -
-- --------------- -
------------------------ - ---------
- ---- -
------------------------ - ---
-
-
---
-------------------- -------------------- ---- -------
---- ------- ---
----------
---- ---------
------ ----------- --------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ----
--
-
--
---------在这个例子中，我们定义了一个名为 focus 的指令，它会在元素插入到 DOM 中时自动获取焦点。同时，我们还添加了一个 update 钩子函数，根据 highlight 的值来改变背景颜色。
小结
自定义指令为 Vue 开发者提供了一种强大的方式来封装和复用 DOM 操作逻辑。通过合理地使用钩子函数和修饰符，我们可以实现各种复杂的功能，提高代码的可维护性和复用性。
在实际项目中，你可以根据具体需求定义自己的指令，以简化复杂的 DOM 操作或实现特定的交互效果。希望本章的内容能帮助你更好地理解和使用 Vue3 的自定义指令。