Vue 3 进阶用法:自定义指令
代码复用是一种美德。Vue 提供了多种手段保障代码复用：组件化是最基础的复用，组合式函数负责带状态的逻辑复用。而指令用于复用底层 DOM 元素的操作逻辑。
指令是相对小众的需求，因为 Vue 已通过“虚拟 DOM”等手段屏蔽了大部分直接的 DOM 操作。有些操作实在绕不过去，才使用指令实现。
Vue 开箱附赠了一些指令，比如 v-model、v-show 等。你也可以开发指令满足自己的定制化需求。
根据指令的注册位置，可以分为两大类：局部指令和全局指令。
一、局部指令
局部指令指的是在某个组件内部注册的指令。
在 <script setup> 中，任何以 v 开头的驼峰格式的变量都可以当作自定义指令。比如，vFocus 变量定义的指令，在模板中可以用作 v-focus。
在组件内部注册的局部指令
二、全局指令
全局指令指的是在应用入口文件（一般为 main.js）中定义的指令。
使用 app.directive() 方法注册全局指令，所有组件可以直接使用。
全局指令
三、指令钩子
指令提供了七个钩子函数，供你在组件的不同生命周期执行指令的代码。
钩子数量看起来挺多，但是大部分都是打酱油的，一般常用的只有 mounted 和 updated 两个。其他的五个钩子除了面试官，普通打工仔用的不多。
指令定义的七个钩子函数
每个钩子函数的形参有四个，前两个用的比较多：el 和 binding。el 表示绑定指令的 DOM 元素，binding 包含详细的指令内容。
指令钩子的四个形式参数
第三个参数 vnode 表示绑定元素的虚拟节点，其中包含的信息可以用于更加细粒度的控制。比如，在内置的 v-show 指令源码中，根据 vnode 的 transition 属性决定是否开启过渡动画。
vShow 的定义
第四个元素 prevVnode 表示上一次渲染时的虚拟节点。它仅在 beforeUpdate 和 updated 两个钩子中有值，其他函数中一律为 undefined。
binding 是一个对象，里面包含多个字段。各字段的含义如下：
- value：传入指令的值
- oldValue：传入治理的旧值，仅在 beforeUpdate 和 updated 中有值
- arg：指令参数
- modifiers：修饰符组成的对象
- instance：使用指令的组件实例
- dir：治理定义对象
写个例子感受一下主要参数对应的指令部分。
指令 binding 参数的字段展示
四、简写形式
如果一个指令只使用了 mounted 和 updated，并且两者的内容完全一样，可以使用指令的简写函数形式。
指令的简写形式
五、组件上的自定义指令
如果组件只有一个根节点，自定义指令会作用于这个根节点，就像《Vue 3 进阶用法：透传特性》的透传行为一样。
如果组件有多个根节点，自定义指令会失效，并被出示黄牌警告。
在组件上使用自定义指令
多根节点的警告信息
因此，没事不要在组件上使用自定义指令。除非忍不住。
参考资料
- Custom Directives，https://vuejs.org/guide/reusability/custom-directives.html
完