大家好，我是
勇宝，一名前端小学生，最近勇宝在开发一个自己的网站，但是不知道猴年马月才能上线呢。大家先期待一波吧！今天呢想来和大家分享一下Vue3中的自定义指令这一小块知识点。我会分享一些我工作中经常用到的知识点，内容相对简单，还请大佬们手下留情。
一、自定义指令directive
1. 概述
先来给大家解释一下自定义指令是什么：首先是
自定义，是说自由定义，那么指令当前就是一些逻辑啦，就比如计算机发出一系列指令大家就可以友好的使用我们的电脑等。它其实和我们Vue中使用的v-model、v-if、v-show很像，我们可以使用v-model就可以实现数据的双向绑定等等。只不过这些指令Vue开发人员指令给我们造好了'轮子'。
直接可以使用的指令，我称为Vue的默认指令。
2. 简单使用
先给大家写一个例子，让大家来感受一下
js
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>大家看不懂没关系，我们接下来一点点讲。
二、局部自定义指令
我给大家举个例子，可能会有些不妥：
比如我们的
老板有这么一个需求，我们的课程网站有好多的分类（Vue、React、Angular等等），我想给每个类别加一个不同的背景色用来提升用户体验。此时对于刚入行的勇宝来说是一头雾水......
后端返回的数据结构
js
data: {
code: 200,
course_category: [
{ id: 1, name: 'Vue', bgColor: 'blue' },
{ id: 2, name: 'React', bgColor: 'green' },
{ id: 3, name: 'Angular', bgColor: 'orange' }
]
}1. 案例示范
js
<template>
<div class="course-category">
<button v-for="item in course_category" :key="item.id">{{ item.name }}</button>
</div>
</template>
<script>
// 比如前面是一系列的请求...，这个bgColor应该前端生成，这里我偷懒就不是我们本次讲解的重点
const { course_category } = data // 解构一下
const vColor = (el, binding) => {
const { value } = binding
el.style.background = value
}
</script>这个代码块高亮可以显示的不太好，大家多多担待。
这是自定义指令的一种简单写法，需要注意的一点是这个命名，开头是v，后面首字母大写。
2. 标准写法
js
const vColor = {
mounted: (el, binding) => {
const { value } = binding
el.style.background = value
}
}这种写法类似于Vue中的钩子函数，除了上边的mounted，还有其他钩子函数
3. 自定义指令生命周期
在 Vue3 中，自定义指令的钩子函数主要有如下七种：
- created：在绑定元素的 attribute 或事件监听器被应用之前调用。
- beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
- mounted ：在绑定元素的父组件被挂载后调用，
大部分自定义指令都写在这里。 - beforeUpdate：在更新包含组件的 VNode 之前调用。
- updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
- beforeUnmount：在卸载绑定元素的父组件之前调用
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
4. 生命周期参数
- el ：指令绑定的元素，我们可以直接来
操作DOM - binding ：来接收我们通过自定义指令传递过来的各种参数
- name：指令名，不包括 v- 前缀。
- value ：指令传递参数，例如例子
v-color="blue"，此时value的值为blue。 - expression：字符串形式的指令表达式。例如 v-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg ：传给指令的参数，可选。例如
v-hasPermission:[name]="'zhangsan'"中，参数为 "name"。
- vnode：Vue 编译生成的虚拟节点。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
三、全局注册
有时我们需要在
多个地方使用到自定义指令，如果每个组件中都写一遍，后期的维护成本太大了，所以我们就用到了全局自定义指令，这样就方便我们使用啦，就比如按钮权限功能。
1. 案例示范
html
<button v-hasPermission="['admin']">删除用户</button>比如这个按钮，规定只有admin角色才可以操作。其他角色不进行显示。
2. 全局注册自定义指令
在我们的main.[ts/js]文件中，我们通过createApp生成的app实例，我们要用到app的directive属性。
js
// main.ts
const app = createApp()
// 其他一系列操作（vue-router、vuex）......
// 注册hasPermission指令
app.directive('hasPermission', {
mounted: (el, binding, vNode) => {
const { value } = binding
if (!value.includes('admin')) {
// 如果角色不是admin就移除
el.parentNode && el.parentNode.removeChild(el)
}
}
})对于按钮权限问题，勇宝觉得这种有点不妥，或者说是不优雅，因为我们是通过元素挂载后再去判断是否存留，最好的方案还是使用函数式组件，直接在渲染之前判断元素是否挂载
四、总结
对于
自定义指令，在我们的工作中使用频率还是很大的。当然了，我写的文章可能很浅显。好多重要的知识点可能没有写到，或者说我自己实在是资浅没用到过。也欢迎各位小伙伴们分享自己的技术点。我一直认为我们
分享知识，其实也是在提升自己。因为一个人确实走的很慢，如果是一群人一定会走的很稳。我是
爱勇宝，一个喜欢分享知识的前端小学生，感谢大家的关注、点赞与支持！！！