vue中允许自定义指令，局部的自定义指令就只能在当前 .vue 文件中使用，全局的则可以在所有的 .vue 文件中使用，整理一下V2、V3自定义指令的方式

一：Vue3中的局部和全局指令

1：局部指令，必须是v开头

<input type="text" v-model="value" v-focus>

<script setup>
//直接写，但是必须是v开头
const vFocus = {
  mounted(el) {
    // 获取input，并调用其focus()方法
    el.focus()
  }
}
</script>

2：全局指令

A：首先创建js文件，导出自定义指令

const directives =  (app) => {
  //这里是给元素取得名字，虽然是focus，但是实际引用的时候必须以v开头
  app.directive('focus',{
    //这里的el就是获取的元素
    mounted(el) {
      el.focus()
     }
  })
}

//默认导出 directives
export default directives
 

B：注册指令，全局引入注册

import directives from './directives'

const app = createApp(App)

directives(app)

C：使用指令

<input type="text" v-model="value" v-focus>

3：钩子函数

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

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

C：mounted：在绑定元素的父组件被挂载后调用。

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

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

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

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

二：Vue中的局部和全局指令

1：局部指令，通过关键字directives

  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },

2：全局指令，在main.js中直接挂在在Vue上

Vue.directive("focus", {
  inserted: function(el) {
    el.focus();
  }
});

3：使用

 <input id="a" v-focus type="text" />

4：钩子函数

A：bind: 初始化只调用一次（dom 未创建就调用）

B：inserted: 初始化调用（dom 创建之后调用）

C：update: 组件更新前调用

D：componentUpdated: 组件更新后调用。

E：unbind: 只调用一次， 指令与元素解绑时调用。