Vue3+TypeScript学习笔记（二十三）

Vue3内置了v-if、v-for等指令，但我们也可以自定义指令。基本操作如下：

1. const vNameofDirective = {}，其中vNameofDirective指的是v+指令名称 : Directive，v+指令名称共同构成变量名，Directive指定变量的类型是一个指令
2. 生命周期钩子函数(共七个)：

1. 生命周期钩子函数函数参数：

   • 第一个是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>