Vue的查漏补缺

自定义指令的使用

在vue3 中自定义指令分为全局指令和局部指令，根据定义的所在环境决定其相关的作用域；

* 如何自定义一个指令

/**
 * 自定义指令 按钮防止重复点击
 * 使用Demo：
 *      import onceClick from '@/directives/common';
 *      import { defineComponent } from "vue";
 *      export default defineComponent({
 *          directives: {
 *              onceClick
 *          }
 *      })
 *      <a href="#" v-onceClick="'test'">删除</a>
 *   	setup的版本
 *    	vOnceClick from '@/directives/common';
 *   	<a href="#" v-once-click="'test'">删除</a>
 *
 */
import { Directive } from 'vue';
const onceClick: Directive = (el, binding, vnode, prevVNode) => {
  const { value } = binding;
  el.addEventListener('click', () => {
    if (!el.disabled) {
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
      }, binding.value || 1000);
    }
  });
};

export default onceClick;

自定指令的钩子函数及参数解析

1. 钩子函数

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。

beforeUpdate：在更新包含组件的 VNode 之前调用。

updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount：在卸载绑定元素的父组件之前调用

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

2. 参数

const onceClick: Directive = (el, binding, vnode, prevVNode) => {}

  el: 为指令所绑定的元素
  blinding: 为自定义指令的参数对象
   const {name,value,expresstion,attr} =  binding;
     name： 指令名，不包括 v- 前缀。
     value：指令的绑定值，例如：v-hasPermission="['user:delete']" 中，绑定值为 'user:delete'，不过需要小伙伴们注意的是，这个绑定值可以是数组也可以是普通对象
     expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
     arg：传给指令的参数，可选。例如 v-hasPermission:[name]="'zhangsan'" 中，参数为 "name"。

  vnode: vue编译后生成的虚拟节点
  prevVNode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

如何批量注册自定义指令（Vue3）

在directives文件夹下面 建立多个自定义指令的子文件夹如 onceClick.ts 和 permission.ts 等子文件夹，以及index.ts文件

// 在 index.ts 文件中
 import onceClick from './common';
import permission from './permission';

// 自定义指令
const directives = { onceClick, permission };

// 批量注册指令

export default {
  install(app) {
    Object.keys(directives).forEach((key) => {
      app.directive(key, directives[key]);
    });
  },
};

在main.ts的文件中 进行全局注册

const app = createApp(App);

app.use(Directives);

app.use(Directives);