vue3自定义指令

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

什么是自定义指令？

我们所熟知的 v-modal、v-if、v-show等都是官方内置的，我们直接使用即可，但是同时也将定义指令的方式暴露出来啦，允许开发自己自定义指令。

作用

从自定义指令所暴露出来的指令钩子来看，比较偏向于dom的操作。 如：

const vCustom = {
   create(el,bind,vnode,prevVnode){
      //对dom的操作
   }
}

在vue3中使用setup有个语法糖可以使用，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令，然后在模板中使用。 例如：

<script setup>
const vCustomDir={
     mounted:(el)=>{
        el.focus();
     }
}
</script>

<template>
    <input type="text" name="" id="" v-customDir/>
</template>

声明周期

指令的生命周期和组件的生命周期类似：

const vCustom =  {
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}

• created：在绑定元素的属性前，或者事件监听器应用前调用
• beforeMount：在元素被插入到DOM前调用，例如我们想要实现输入框的自动聚焦，就不能在beforeMount钩子中实现
• mounted：在绑定元素的父组件以及自己的所有子节点都挂载完毕后调用，这个时候DOM已经渲染出来，我们实现输入框自动聚焦也是在这个钩子函数中实现
• beforeUpdate：绑定元素的父组件更新前调用
• updated：在绑定元素的父组件以及自己的所有子节点都更新完毕后调用
• beforeUnmount：绑定元素的父组件卸载前调用
• unmounted：绑定元素的父组件卸载后调用

mounted和updated的使用频率应该是比较高的。

钩子参数

自定义指令就是为了操作dom,因此就可以有四个参数，除el之外都是可选的，其中需要的参数就是el了。

• el：指令绑定到的DOM元素，可以用于直接操作当前元素，默认传入钩子的就是el参数，例如我们开始实现的focus指令，就是直接操作的元素DOM。

• binding:这是一个对象，包含以下属性：

  • value: 传递给指令的值。
  • oldvalue：之前的值。
  • arg：传递给指令的参数和value不一样。
  • modiflers：一个包含修饰符的对象。
  • instance：指令的组件实例。
  • dir：指令的定义对象。

• vnode：绑定的元素的底层VNode。

• prevVnode：之间渲染的VNode。