Vue3内置了v-if、v-for等指令，但我们也可以自定义指令。基本操作如下：
- const vNameofDirective = {}，其中vNameofDirective指的是v+指令名称 : Directive，v+指令名称共同构成变量名，Directive指定变量的类型是一个指令
- 生命周期钩子函数(共七个)：
| created | 元素初始化时调用 |
|---|---|
| beforeMount | 指令绑定到元素后调用，只调用一次 |
| mounted | 元素插入父级DOM时调用 |
| beforeUpdate | 元素被更新之前调用 |
| update | 已被删除，改用updated，元素被更新之后调用 |
| beforeUnmount | 在元素被移除前调用 |
| unmounted | 指令被移除后调用，只调用一次 |
生命周期钩子函数函数参数：
- 第一个是el当前绑定的真实DOM元素
- 第二个是binding，模板上传入的实参就在这里获取
- 第三个是当前元素的虚拟DOM，也就是Vnode
- 第四个是prevNode上一个虚拟节点，仅在beforeUpdate和updated钩子中可用
完整代码：
App.vue
<template>
<button @click="flag = !flag">切换</button>
<!-- v-Move后的是要绑定的变量,这里随便绑定了一个 -->
<A v-if="flag" v-Move:aaa="{ background: 'red' }"></A>
</template>
<script setup lang="ts">
import { ref, reactive, Directive, DirectiveBinding } from 'vue'
import A from './components/A.vue'
let flag = ref(true)
const vMove: Directive = {
created() {
console.log('创建之前')
},
beforeMount(...args) {
console.log('挂载之前')
console.log(args)
},
mounted(el: HTMLElement, dir: DirectiveBinding) {
el.style.background = dir.value.background
console.log(dir.value.background)
},
beforeUpdate() {},
updated() {},
beforeUnmount() {
console.log('销毁之前')
},
unmounted() {
console.log('销毁之后')
},
}
</script>
<style scoped></style>
A.vue
<template>
<div></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped>
div{
width:300px;
height:300px;
}
</style>