一、自定义指令的方法
Vue中有v-if、v-for、v-show、v-model等一些内置指令，其实我们也可以通过directive来自定义组件，但是他属于破坏性的更新。
必须以vNameOfDirective 的形式来命名本地自定义指令，以使得他们可以在模版中直接使用, 标签名称：v-NameofDirective
定义格式如：
//必须v开头，后面跟着一个对象
const vMove:Directive = {//限制类型为Directive....
}
`模版中使用： v-Move="{传递的参数}"`
二、自定义指令初探及参数的获取
Vue3 指令的钩子函数：
- created： 元素初始化的时候
- beforeMount： 指令绑定到元素后调用只调用一次
- mounted： 元素插入父级dom调用
- beforeUpdate： 元素被更新之前调用
- update： 这个周期方法被移除改用updated
- beforeUnmount： 在元素被移除前调用
- unmounted： 指令被移除后调用只调用一次
<template><div><button>切换</button><!--使用指令：v-move, 还可以自定参数aaa,自定义修饰符 lvmanba --><A v-moves:aaa.lvmanba="{background:'red'}"></A></div>
</template><script setup lang='ts'>
import { ref,reactive,Directive} from 'vue'
import A from './components/A.vue'
//自定义一个vMove指令，并获取参数，在生命周期的每个阶段(钩子函数)都可以获取。
const vMoves: Directive = {created: (...args:Array<any>) => { //...解构之后编程了一个数组console.log("初始化====>created");console.log(args)},beforeMount() {// 在元素上做些操作console.log("悬挂之前=======>beforeMount");},mounted() {console.log("悬挂完成======>mounted");},beforeUpdate() {console.log("更新之前beforeUpdate");},updated() {console.log("更新结束updated");},beforeUnmount() { console.log("======>卸载之前beforeUnmount");},unmounted() {console.log("======>卸载完成unmounted");}
}
</script>
<style scoped></style>
获取的参数格式如下（并获取参数，在生命周期的每个阶段(钩子函数)都可以获取）：4个参数
生命周期钩子参数详解：
第一个参数（div.A）：(el) 当前绑定的DOM 元素 【类型：HTMLElement】
第二个参数 ：传递的全部信息【类型：DirectiveBing】
1(arg）、传递的参数
2(dir)、当前这个组件的实例（一个对象，在注册指令时作为参数传递）。
3(instance): 使用指令的组件实例
4(modifiers): 包含修饰符(如果有的话) 的对象。
5(oldValue)：先前的值，仅在 beforeUpdate 和 updated 中可用。
6(value): 传递过来的值(传递给指令的值)。
7(object):
第三个参数：当前元素的虚拟DOM 也就是Vnode
第四个参数：null （prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用 ）
三、根据参数可以定制我们指令的功能
我们在实际使用一般使用 mounted、updated 和 unmounted 这三个钩子。
<template>