【深入vue3 之 directive 指令的使用与讲解】

自定义全局指令：实例app.directive()

• 参数：
  • {string} name
  • {Function | Object} [definition]
• 返回值：
  • 如果传入 definition 参数，则返回应用实例。
  • 如果不传入 definition 参数，则返回指令定义。
• 用法：
  • 注册或检索全局指令。
• 自定义指令概念：
  • 在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
  • 自定义指令是vue提供给我们用原生DOM封装一系列DOM相关功能、视图变化的一个接口(API)
  • 综上，使用指令封装底层时，基本都在使用原生JS进行代码编写，所以要熟悉使用原生！

---

模板内使用指令方式：v-[指令名]

<template>
  <div v-customDirective>东海帝皇</div>
  <div v-customDirective:argData>两喷射</div>
  <div v-customDirective.modifireData>草上飞</div>
  <div v-customDirective='derectiveAnyData'>麦昆</div>
</template>

---

注册全局指令 ，参数讲解：

• name：有啥好讲的，就是指令名。。
• definition：
  • 指令具有7个生命周期（见下面代码）
  • 4个参数

    • el：指令绑定到的元素。这可用于直接操作 DOM。

    • binding：

      1. instance : 使用指令的组件实例。

      2. value : 传递给指令的值。例如，在 v-my-directive="1 + 1" 中，该值为 2。可传递任意类型的数据！指令函数能够接受所有合法的 JavaScript 表达式。

      3. oldValue : 先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。

      4. arg : 参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 "foo"。注意：值只有一个，且是字符串。指令参数名可是动态的：v-my-directive:[argName]="anyData"

      5. modifiers : 包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。

      6. dir : 一个对象，在注册指令时作为参数传递。简单来说，就是现在这的 content:{} 对象内的所有生命周期数据。

    • vnode：上面作为 el 参数收到的真实 DOM 元素的蓝图，el树的所有节点。

    • prevNode : 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

    • （注意 1：如上一点所说，除了这2个生命周期有这4个参数，其他的5个生命周期都是只有前面3个参数）

    • （注意 2：除了 el 之外，你应该将这些参数视为只读，并且永远不要修改它们。如果你需要跨钩子共享信息，建议通过元素的自定义数据属性集进行共享。）

第二个参数为对象写法：（对象写法包含所有的指令的生命周期）

import { createApp } from 'vue'
const app = createApp(App)
app.directive('highlight',{
  created(el, binding, vnode) {

  },
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  },
  mounted(el, binding, vnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) { 
    //! 第四个参数 prevNode 只在beforeUpdate和updated才有！
    el.style.background = binding.value
  },
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode) {
    // 当指令绑定的元素 的父组件销毁前调用。  <简单讲，指令元素的父组件销毁前调用>
  },
  unmounted(el, binding, vnode) {
    // 当指令与元素解除绑定且父组件已销毁时调用。
  },
})

第二个参数为函数：（固定只在2个生命周期上触发）在前面的例子中，你可能想在 mounted 和 updated 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个回调函数传递给指令来实现：

import { createApp } from 'vue'
const app = createApp(App)
app.directive('highlight',(el,binding,vNode,prevNode)=>{
  console.log(el,binding,vNode,pre);
  // 注意 prevNode 只有在 updated 生命周期才有值！
})

---

在组件中使用：

• 绑定在组件时，如果该组件有根组件，则自动继承到组件的根节点上。
• 有了片段支持以后，组件可能会有多个根节点。当被应用在一个多根节点的组件上时，指令会被忽略，并且会抛出一个警告。
• 指令不会通过 v-bind="$attrs" 被传入另一个元素。

关于 组件继承 和 v-bind="$attrs" 深入请看 vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解

<my-component v-demo="test"></my-component>

---

检索全局指令

上面讲了使用和注册，此处讲解检索全局指令，不过没想到有好的应用场景，欢迎评论留言交流。

import { createApp } from 'vue'
import fontDirective from '@directive/font'
const app = createApp(App)
app.use(fontDirective) // 此处注册了 'highlight' 指令

// 案例1：
let definition = app.directive('highlight')
console.log(definition) // 已注册的指令会返回对应指令你声明的各生命周期

let definition2 = app.directive('kumiko')
console.log(definition) // 打印 undefined >> 如果未注册指令，返回 undefined

// 案例2：
// 如果你只是要检索，而不小心加了第2个参数，
// 那恭喜你，这就变成了注册指令，新的覆盖旧的。
let definition3 = app.directive('highlight',{})

// 奇葩案例3：
let definition4 = app.directive('highlight',null)
let definition5 = app.directive('highlight',undefined)
// 如果传的是这2个，那还是正常的检索功能，官方没说就最好不要这么玩，哪天v3更新后出bug，就恭喜你了。
// 如果传的不是 {}，会提示报错、警告

---

以上是全局指令，组件options api的 directives 就懒得讲了。除了不是全局的，其他照旧。

纯<script setup>的composition api没注册局部指令的api。只找到TS类型：Directive

TS类型：
第一个为string，第二个参数为 Directive类型。
import { Directive } from 'vue';