vue3自定义指令

Vue 除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

•  注意，在 Vue 中，代码复用和抽象的主要形式是组件。
• 然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

Vue自定义指令分为两种：

1. 自定义局部指令
2. 自定义全局指令

通过自定义指令 v-focus 来举例 Vue3中某个元素挂载完成后获取输入框焦点：

1. 局部指令的实现方式

<script setup>
  // 自定义指令名称的方式: vNameOfDirective
  const vFocus = {
    mounted: (el) => {
      console.log("v-focus mounted");
      el.focus()
    }
  }
</script>

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

<style scoped>

</style>

2.全局指令的实现方式

// mian.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).directive("focus", {
  mounted: (el) => {
    console.log("v-focus mounted");
    el.focus()
  }
}).mount('#app')

贴上自定义指令的生命周期

// 注册
app.directive('my-directive', {
  // 指令具有一组生命周期钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 在绑定元素的父组件挂载之后调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 在绑定元素的父组件卸载之后调用
  unmounted() {}
})