Vue 3.0自定义指令的使用入门
提示：在阅读本文前，建议您先阅读 vue 3 官方文档 自定义指令 章节的内容。
一、自定义指令
1、注册全局自定义指令
2、使用全局自定义指令
3、完整的使用示例
当页面加载完成后，页面中的输入框元素将自动获得焦点。该示例的代码比较简单，主要包含 3 个步骤：创建 app 对象、注册全局自定义指令和应用挂载。其中创建 app 对象的细节，阿宝哥会在后续的文章中单独介绍，下面我们将重点分析其他 2 个步骤。首先我们先来分析注册全局自定义指令的过程。
二、注册全局自定义指令的过程
在以上示例中，我们使用 app 对象的 directive 方法来注册全局自定义指令：
当然，除了注册全局自定义指令外，我们也可以注册局部指令，因为组件中也接受一个 directives 的选项：
对于以上示例来说，我们使用的 app.directive 方法被定义在 runtime-core/src/apicreateapp.ts 文件中：
通过观察以上代码，我们可以知道 directive 方法支持以下两个参数：
- name：表示指令的名称；
- directive（可选）：表示指令的定义。
name 参数比较简单，所以我们重点分析 directive 参数，该参数的类型是 directive 类型：
由上可知 directive 类型属于联合类型，所以我们需要继续分析 objectdirective 和 functiondirective 类型。这里我们先来看一下 objectdirective 类型的定义：
该类型定义了对象类型的指令，对象上的每个属性表示指令生命周期上的钩子。而 functiondirective 类型则表示函数类型的指令：
介绍完 directive 类型，我们再回顾一下前面的示例，相信你就会清晰很多：
对于以上示例，当我们调用 app.directive 方法注册自定义 focus 指令时，就会执行以下逻辑：
当 focus 指令注册成功之后，该指令会被保存在 context 对象的 directives 属性中，具体如下图所示：
顾名思义 context 是表示应用的上下文对象，那么该对象是如何创建的呢？其实，该对象是通过 createappcontext 函数来创建的：
而 createappcontext 函数被定义在 runtime-core/src/apicreateapp.ts 文件中：
看到这里，是不是觉得注册全局自定义指令的内部处理逻辑其实挺简单的。那么对于已注册的 focus 指令，何时会被调用呢？要回答这个问题，我们就需要分析另一个步骤 —— 应用挂载。
三、应用挂载的过程
为了更加直观地了解应用挂载的过程，阿宝哥利用 chrome 开发者工具，记录了应用挂载的主要过程：
通过上图，我们就可以知道应用挂载期间所经历的主要过程。此外，从图中我们也发现了一个与指令相关的函数 resolvedirective。很明显，该函数用于解析指令，且该函数在 render 方法中会被调用。在源码中，我们找到了该函数的定义：
在 resolvedirective 函数内部，会继续调用 resolveasset 函数来执行具体的解析操作。在分析 resolveasset 函数的具体实现之前，我们在 resolvedirective 函数内部加个断点，来一睹 render 方法的 “芳容”：
在上图中，我们看到了与 focus 指令相关的 _resolvedirective("focus") 函数调用。前面我们已经知道在 resolvedirective 函数内部会继续调用 resolveasset 函数，该函数的具体实现如下：
因为注册 focus 指令时，使用的是全局注册的方式，所以解析的过程会执行 resolve(instance.appcontext[type], name) 该语句，其中 resolve 方法的定义如下：
分析完以上的处理流程，我们可以知道在解析全局注册的指令时，会通过 resolve 函数从应用的上下文对象中获取已注册的指令对象。在获取到 _directive_focus 指令对象后，render 方法内部会继续调用 _withdirectives 函数，用于把指令添加到 vnode 对象上，该函数被定义在 runtime-core/src/directives.ts 文件中：
因为一个节点上可能会应用多个指令，所以 withdirectives 函数在 vnode 对象上定义了一个 dirs 属性且该属性值为数组。对于前面的示例来说，在调用 withdirectives 函数之后，vnode 对象上就会新增一个 dirs 属性，具体如下图所示：
通过上面的分析，我们已经知道在组件的 render 方法中，我们会通过 withdirectives 函数把指令注册对应的 vnode 对象上。那么 focus 指令上定义的钩子什么时候会被调用呢？在继续分析之前，我们先来介绍一下指令对象所支持的钩子函数。
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- created：在绑定元素的属性或事件监听器被应用之前调用。
- beforemount：当指令第一次绑定到元素并且在挂载父组件之前调用。
- mounted：在绑定元素的父组件被挂载后调用。
- beforeupdate：在更新包含组件的 vnode 之前调用。
- updated：在包含组件的 vnode 及其子组件的 vnode 更新后调用。
- beforeunmount：在卸载绑定元素的父组件之前调用。
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
介绍完这些钩子函数之后，我们再来回顾一下前面介绍的 objectdirective 类型：
好的，接下来我们来分析一下 focus 指令上定义的钩子什么时候被调用。同样，阿宝哥在 focus 指令的 mounted 方法中加个断点：
在图中右侧的调用栈中，我们看到了 invokedirectivehook 函数，很明显该函数的作用就是调用指令上已注册的钩子。出于篇幅考虑，具体的细节阿宝哥就不继续介绍了，感兴趣的小伙伴可以自行断点调试一下。
四、阿宝哥有话说
4.1 vue 3 有哪些内置指令？
在介绍注册全局自定义指令的过程中，我们看到了一个 validatedirectivename 函数，该函数用于验证自定义指令的名称，从而避免自定义指令名称，与已有的内置指令名称冲突。
在 validatedirectivename 函数内部，会通过 isbuiltindirective(name) 语句来判断是否为内置指令：
以上代码中的 makemap 函数，用于生成一个 map 对象（object.create(null)）并返回一个函数，用于检测某个 key 是否存在 map 对象中。另外，通过以上代码，我们就可以很清楚地了解 vue 3 中为我们提供了哪些内置指令。
4.2 指令有几种类型？
在 vue 3 中指令分为 objectdirective 和 functiondirective 两种类型：
objectdirective
functiondirective
如果你想在 mounted 和 updated 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将回调函数传递给指令来实现
4.3 注册全局指令与局部指令有什么区别？
注册全局指令
注册局部指令
解析全局注册和局部注册的指令
4.4 内置指令和自定义指令生成的渲染函数有什么区别？
要了解内置指令和自定义指令生成的渲染函数的区别，阿宝哥以 v-if 、v-show 内置指令和 v-focus 自定义指令为例，然后使用 vue 3 template explorer 这个在线工具来编译生成渲染函数：
v-if 内置指令
对于 v-if 指令来说，在编译后会通过 ?: 三目运算符来实现动态创建节点的功能。
v-show 内置指令
以上示例中的 vshow 指令被定义在 packages/runtime-dom/src/directives/vshow.ts 文件中，该指令属于 objectdirective 类型的指令，该指令内部定义了 beforemount、mounted、updated 和 beforeunmount 四个钩子。
v-focus 自定义指令
通过对比 v-focus 与 v-show 指令生成的渲染函数，我们可知 v-focus 自定义指令与 v-show 内置指令都会通过 withdirectives 函数，把指令注册到 vnode 对象上。而自定义指令相比内置指令来说，会多一个指令解析的过程。
此外，如果在 input 元素上，同时应用了 v-show 和 v-focus 指令，则在调用 _withdirectives 函数时，将使用二维数组：
4.5 如何在渲染函数中应用指令？
除了在模板中应用指令之外，利用前面介绍的 withdirectives 函数，我们可以很方便地在渲染函数中应用指定的指令：
本文阿宝哥主要介绍了在 vue 3 中如何自定义指令、如何注册全局和局部指令。为了让大家能够更深入地掌握自定义指令的相关知识，阿宝哥从源码的角度分析了指令的注册和应用过程。
在后续的文章中，阿宝哥将会介绍一些特殊的指令，当然也会重点分析一下双向绑定的原理，感兴趣的小伙伴不要错过哟。
以上就是vue 3.0自定义指令的使用入门的详细内容，更多关于vue 3.0自定义指令的使用的资料请关注其它相关文章！