cn.vuejs.org/guide/reusa… 官方文档

所有的自定义指令需要配合自定义指令的生命周期

在这里先介绍自定义的使用方法

1.局部自定义指令的使用方法

1-1:<script setup>中的使用方式

官方文档介绍:任何以 `v` 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，`vFocus` 即可以在模板中以 `v-focus` 的形式使用。

//标签上绑定v-focus
<template>
<input v-focus /> 
</template>

<script setup> // 在模板中启用 v-focus 
const vFocus = { 
// mounted只执行一次,如果考虑到更新的话,需要beforeUpdate钩子
mounted: (dom,obj) => 
//  参数dom是绑定标签上的dom元素
//  所有的标签最终形式都是对面,所以obj就是标签的对象形式
    console.log(dom,obj);
} 
</script>

1-2:在没有使用 <script setup> 的情况下，自定义指令需要通过 directives 选项注册：

export default {
setup() {
/*...*/ 
},
directives: {
// 在模板中启用 
v-focus focus: { /* ... */ } 
    }
}

2.全局自定义指令的使用方法

const app = createApp({})

app.directive('指令名', (dom, obj) => {
  ...
})

3.指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

4.完整的写法需要配合指令钩子使用

挂载-更新-销毁

//标签上绑定v-focus
<template>
<input v-focus /> 
</template>

<script setup> 
const vFocus = { 
// 挂载,只执行一次
mounted: (dom,obj) => {},
// 更新
beforeUpdate: (dom,obj)=> {},
// 销毁
beforeUnmount: (dom,obj)=> {},
} 
</script>