一、自定义指令的方法

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,type Directive} from 'vue'
import A from './components/A.vue'
//自定义一个vMove指令，类型为Directive（这个需要引入），并获取参数，在生命周期的每个阶段(钩子函数)都可以获取。
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>
    <div>
        <button>切换</button>
        <A v-moves:aaa.lvmanba="{background:'red'}"></A>
    </div>
</template>
<script setup lang='ts'>
import {