vue3自定义指令的使用

定义指令的变化

根据vue3文档的描述
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0
自定义指令的 API 已更改为与组件生命周期一致。
且 binding.expression 已移除。
也就是说vue2的自定义钩子函数被移除了。
我们不能够在使用vue2的自定钩子函数了

vue2的自定义钩子函数

bind (){} 指令绑定到元素后调用。只调用一次。主要用来操作css
inserted (){} 元素插入父 DOM 后调用。有关的DOM操作可以放在这个钩子函数中。
update(){} - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated(){}- 一旦组件和子级被更新，就会调用这个钩子。
unbind(){} - 一旦指令被移除，就会调用这个钩子。也只调用一次。

ps:vue3中上面的这5个钩子函数将不能够在使用了。
已经被移除了。大家不要在使用了。

vue3的自定义钩子函数

created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
bind 变为 → beforeMount 在元素被插入到 DOM 前调用，通常进行css的操作
inserted 变为→ mounted 可以进行DOM操作
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
componentUpdated → updated
beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
unbind -> unmounted

vue3自定义指令最终的APi如下

const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // 新增
beforeMount(el, binding, vnode) {},
mounted() {},
beforeUpdate() {}, // 新增
updated() {},
beforeUnmount() {}, // 新增
unmounted() {}
}

created(el, binding, vnode, prevVnode)

第1个参数el: 指令绑定的DOM元素。可以直接去操作的哈。
第2个参数binding:是一个对象，包含
{
arg:'',
dir:{},
instance:Proxy,
modifiers:{},
value:'传递的指令值'
}

定义一个简单的颜色指令

在main.ts文件中。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App);

// 定义全局自定义指令
app.directive("bg", {
// 在元素的 attribute 或事件监听器被应用之前调用
created(el, binding, vnode, prevVnode) {
},

// 在元素被插入到 DOM 前调用，通常进行css的操作
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
});

app.use(router).mount('#app')

在使用的页面

<template>
<div>
<!-- 注意pink需要引号 -->
<div v-bg="'pink'">
<p>自定指令</p>
<p>定义的是颜色</p>
</div>
</div>
</template>

什么是防抖 ？

什么是防抖:当持续触发事件时，【一定时间段内】该事件没有被触发。
事件处理函数才会被执行一次。
如果设定的时间到来之前，又触发了事件，就重新开始延时。

自定义防抖指令

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
const app = createApp(App);
// 定义全局自定义指令
app.directive("debounce", {
mounted(el, binding) {
// 如果不是函数或者不是事件直接返回
if (typeof binding.value.fn !== "function" || !binding.value.event) return;
// 默认的延迟时间
let delay = 400;
el.timer = null;
console.log('多次执行')
el.handler = function () {
if (el.timer) {
clearTimeout(el.timer);
}
el.timer = setTimeout(() => {
binding.value.fn.apply(this, arguments);
},binding.value.delay || delay);
};
el.addEventListener(binding.value.event, el.handler);
},
// 元素卸载前清理定需要清除:延时器并且移除监听事件
beforeUnmount(el, binding) {
console.log(el,'即将卸载');
if (el.timer) {
el.timer = null;
clearTimeout(el.timer);
}
el.removeEventListener(binding.value.event, el.handler);
},
});
app.use(router).mount("#app");

使用防抖

<template>
<div>
<button v-debounce="{ fn: handler, event: 'click', delay: 300}">
点击我呀
</button>
</div>
</template>

<script setup lang="ts">
const handler = ():void => {
console.log('防抖点击');
}
</script>