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>