自定义指令-directive

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

Vue3的自定义指令directive是属于破坏性更新的，Vue3和Vue2的钩子函数是完全不一样的，Vue3的钩子函数和生命周期基本是一样，方便我们记住，created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted这里就不过多介绍了，移步到官网地址，Vue2指令是bind、inserted、update、componentUpdated、unbind，移步到官网地址

如何使用

使用命名是有规范的，必须以v开头的形式来命名本地自定义指令，这样可以直接在模板中使用

定义一个名称v-mode的自定义指令

import { Directive } from 'vue'

const vMove:Directive = {}

可以自定义:foo参数，自定义.bar修饰符

<Vdirective  v-move:foo.bar="{background: 'red'}"></Vdirective>

这些传入的值，在每个钩子函数都可以接收到,我们用一个钩子函数演示一下，接收的值有4个，这里用解构的方式来接收...args

  mounted(...args:Array<any>) {
    console.log('mounted',args);
  },

打印出来的值是一个数组，4个参数，一一对应一下，使用最多的就是前面两个

数组第一个参数代表的是el,指令绑定到的元素。这可以用于直接操作 DOM。
数组第二个参数代表的是binding，是一个对象，包含六个属性；

arg：foo,就是传值过来自定义的参数
value：传过来的值，我们定义了一个background: 'red',就在这里显示
oldValue：就是上一次的值
modifiers：就是自定义修饰符bar
instance: 当前组件的实例
dir：指令的定义对象，可以看到使用了那个钩子函数

数组第三个参数代表的是vnode，表示当前组件的vnode
数组第三个参数代表的是prevNode，上一个虚拟DOM，上一个还没有，所有打印的是null