Vue3场景应用之自定义指令

生命周期

created：在绑定元素的 attribute 或事件监听器被应用之前调用；
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里；
beforeUpdate：在更新包含组件的 VNode 之前调用；
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
beforeUnmount：在卸载绑定元素的父组件之前调用；
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

生命周期四个参数

这里七个钩子函数，钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：

el：指令所绑定的元素，可以用来直接操作 DOM（可以进行事件绑定）。
binding：我们通过自定义指令传递的各种参数
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

模板代码

// src/directives/myDirective.js
import { app } from 'vue'

const myDirective = {
  beforeMount(el, binding, vnode, prevVnode) {
    // 在元素挂载到DOM之前执行的操作
  },
  mounted(el, binding, vnode, prevVnode) {
    // 在元素挂载到DOM之后执行的操作
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // 在元素更新之前执行的操作
  },
  updated(el, binding, vnode, prevVnode) {
    // 在元素更新之后执行的操作
  },
  beforeUnmount(el, binding, vnode, prevVnode) {
    // 在元素卸载之前执行的操作
  },
  unmounted(el, binding, vnode, prevVnode) {
    // 在元素卸载之后执行的操作
  },
}

app.directive('my-directive', myDirective)

自定义指令例子

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全局自定义指令
app.directive('my-directive', {
  mounted(el, binding) {
    // 当指令绑定到元素上时触发
    // el 是绑定的元素
    // binding 包含了指令的信息
    el.style.color = binding.value;
  },
});

app.mount('#app');

这里我们定义了一个名为 my-directive 的全局自定义指令，它在绑定到元素上时，将元素的文本颜色设置为指令的值。

使用自定义指令

<template>
  <div>
    <p v-my-directive="'red'">这个段落的文本颜色是红色。</p>
  </div>
</template>

在上述代码中，我们给 v-my-directive 指令传递了一个值 ‘red’，这个值会在指令的 binding 对象中被接收，然后用于改变元素的文本颜色。

参数和修饰符

自定义指令也可以接受参数和修饰符。参数可以通过指令表达式传递，修饰符可以用于改变指令行为。例如：

<template>
  <div>
    <p v-my-directive:arg.modifier="'red'">这个段落的文本颜色是红色。</p>
  </div>
</template>

自定义防抖节流指令

可以创建自定义指令来实现防抖和节流的功能，以控制事件的触发频率。以下是一个示例，演示如何创建一个自定义防抖指令和一个自定义节流指令。

1. 自定义防抖指令

防抖是指在一段连续触发的事件中，只执行最后一次触发的操作。首先，创建一个 v-debounce 指令：

// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('debounce', {
  mounted(el, binding) {
    let timeout;
    const delay = parseInt(binding.value) || 300; // 默认延迟时间为 300 毫秒

    el.addEventListener('input', () => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        binding.value();
      }, delay);
    });
  },
});

app.mount('#app');

在上述代码中，我们创建了一个 v-debounce 指令，它会在输入框的 input 事件上进行防抖操作。你可以将该指令用于任何需要延迟处理输入事件的地方。

2. 使用自定义防抖指令

在组件模板中使用自定义防抖指令如下：

<template>
  <div>
    <input type="text" v-debounce="handleInput" />
  </div>
</template>

<script>
export default {
  methods: {
    handleInput() {
      // 处理输入事件的逻辑
    },
  },
};
</script>

这里我们使用了 v-debounce 指令，并将 handleInput 方法作为指令的绑定值，这样在输入事件触发时，handleInput 方法会被防抖执行。

自定义节流指令

节流是指在一段连续触发的事件中，每隔一定时间执行一次操作。下面是一个 v-throttle 自定义指令的示例：

// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('throttle', {
  mounted(el, binding) {
    let canExecute = true;
    const delay = parseInt(binding.value) || 300; // 默认间隔时间为 300 毫秒

    el.addEventListener('click', () => {
      if (canExecute) {
        binding.value();
        canExecute = false;
        setTimeout(() => {
          canExecute = true;
        }, delay);
      }
    });
  },
});

app.mount('#app');

在上述代码中，我们创建了一个 v-throttle 指令，它会在点击事件上进行节流操作。你可以将该指令用于需要限制点击频率的元素。

使用自定义节流指令

在组件模板中使用自定义节流指令如下：

<template>
  <div>
    <button v-throttle="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    },
  },
};
</script>

这里我们使用了 v-throttle 指令，并将 handleClick 方法作为指令的绑定值，这样点击事件会被节流执行。

创建插件防抖节流指令

创建插件

// debounceThrottlePlugin.js

export default {
  install(app) {
    // 创建防抖指令
    app.directive('debounce', {
      mounted(el, binding) {
        let timeout;
        const delay = parseInt(binding.value) || 300; // 默认延迟时间为 300 毫秒
  
        el.addEventListener('input', () => {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            binding.value();
          }, delay);
        });
      },
    });
  
    // 创建节流指令
    app.directive('throttle', {
      mounted(el, binding) {
        let canExecute = true;
        const delay = parseInt(binding.value) || 300; // 默认间隔时间为 300 毫秒
  
        el.addEventListener('click', () => {
          if (canExecute) {
            binding.value();
            canExecute = false;
            setTimeout(() => {
              canExecute = true;
            }, delay);
          }
        });
      },
    });
  },
};

注册插件

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import debounceThrottlePlugin from './debounceThrottlePlugin';

const app = createApp(App);

// 注册插件
app.use(debounceThrottlePlugin);

app.mount('#app');

使用通用防抖和节流指令

<template>
  <div>
    <input type="text" v-debounce="handleInput" />
    <button v-throttle="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleInput() {
      // 防抖操作，处理输入事件的逻辑
    },
    handleClick() {
      // 节流操作，处理点击事件的逻辑
    },
  },
};
</script>