Vue3自定义指令的那些事（手把手教学）

大家好，我是勇宝，一名前端小学生，最近勇宝在开发一个自己的网站，但是不知道猴年马月才能上线呢。大家先期待一波吧！今天呢想来和大家分享一下Vue3中的自定义指令这一小块知识点。我会分享一些我工作中经常用到的知识点，内容相对简单，还请大佬们手下留情。

一、自定义指令directive

1. 概述

先来给大家解释一下自定义指令是什么：首先是自定义，是说自由定义，那么指令当前就是一些逻辑啦，就比如计算机发出一系列指令大家就可以友好的使用我们的电脑等。它其实和我们Vue中使用的v-model、v-if、v-show很像，我们可以使用v-model就可以实现数据的双向绑定等等。只不过这些指令Vue开发人员指令给我们造好了‘轮子’。

直接可以使用的指令，我称为Vue的默认指令。

2. 简单使用

先给大家写一个例子，让大家来感受一下

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

大家看不懂没关系，我们接下来一点点讲。

二、局部自定义指令

我给大家举个例子，可能会有些不妥：

比如我们的老板有这么一个需求，我们的课程网站有好多的分类（Vue、React、Angular等等），我想给每个类别加一个不同的背景色用来提升用户体验。此时对于刚入行的勇宝来说是一头雾水…

后端返回的数据结构

data: {
    code: 200,
    course_category: [
        { id: 1, name: 'Vue', bgColor: 'blue' },
        { id: 2, name: 'React', bgColor: 'green' },
        { id: 3, name: 'Angular', bgColor: 'orange' }
    ]
}

1. 案例示范

<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. 标准写法

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. 案例示范

<button v-hasPermission="['admin']">删除用户button>

比如这个按钮，规定只有admin角色才可以操作。其他角色不进行显示。

2. 全局注册自定义指令

在我们的main.[ts/js]文件中，我们通过createApp生成的app实例，我们要用到app的directive属性。

// 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)
        }
    }
})

对于按钮权限问题，勇宝觉得这种有点不妥，或者说是不优雅，因为我们是通过元素挂载后再去判断是否存留，最好的方案还是使用函数式组件，直接在渲染之前判断元素是否挂载

四、总结

对于自定义指令，在我们的工作中使用频率还是很大的。当然了，我写的文章可能很浅显。好多重要的知识点可能没有写到，或者说我自己实在是资浅没用到过。也欢迎各位小伙伴们分享自己的技术点。

我一直认为我们分享知识，其实也是在提升自己。因为一个人确实走的很慢，如果是一群人一定会走的很稳。

我是爱勇宝，一个喜欢分享知识的前端小学生，感谢大家的关注、点赞与支持！！！