vue3自定义指令（局部 / 全局）

在Vue的模板语法中我们除了使用：v-show、v-for、v-model等，Vue 也允许我们来自定义自己的指令。

• 注意：在Vue中，代码的复用和抽象主要还是通过组件；
• 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；

自定义指令分为两种：

1. 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
2. 自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

通过自定义指令 v-focus 来实现 当某个元素挂载完成后可以自定获取焦点

1.局部指令实现方式

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

<script>
  export default {
    // 局部指令
    directives: {
      focus: {
        mounted(el, bindings, vnode, preVnode) {
          console.log("focus mounted");
          el.focus();
        }
      }
    },
    setup() {

    }
  }
</script>

<style scoped>

</style>

2.全局指令实现方式

// 自定义全局指令，可以在main.js 的app上注册就可以全局使用
app.directive("focus", {
  mounted(el, bindings, vnode, preVnode) {
    console.log("focus mounted");
    el.focus();
  }
})

指令的生命周期

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