1.注册1全局自定义指令在main.js中使用app.directive()进行注册其语法为app.directive(自定义指令名称,{钩子函数(节点绑定对象){逻辑操作})const app Vue.createApp({}) // 注册一个全局自定义指令 v-focus app.directive(focus, { // 当被绑定的元素挂载到 DOM 中时…… mounted(el) { // 聚焦元素 el.focus() } })2局部自定义指令组合式Api中在script setup中任何以v开头的驼峰式变量都会被自动识别为局部自定义指令。模板中使用时将驼峰转为短横线并加上v-前缀。script setup // 变量名必须以 v 开头驼峰式 const vFocus { mounted(el) { el.focus() } } /script template input v-focus placeholder自动聚焦 / /template选项式Api中在组件的directives选项中注册语法为directives: { 指令名称{ 钩子函数: function (Dom节点, 绑定对象, 虚拟节点, 上一个虚拟节点) { 逻辑操作 }} }。template el-input v-modelkanno.name v-focus / template/ export default { name: kanno, directives: { focus: { // 指令的定义 inserted: function (el) { el.focus(); // 获取焦点 } } }, data() { return { kanno: kanno, }; }, methods: {}, mounted() { console.log(kanno mounted); }, };2.钩子函数指令定义对象可以提供的钩子函数均为可选created新增。在绑定元素的属性或事件监听器被应用之前调用。beforeMount指令第一次绑定到元素并且在挂载父组件之前调用mounted在绑定元素的父组件被挂载后调用beforeUpdate新增。在更新包含组件的 VNode 之前调用。updated在包含组件的VNode 及其子组件的 VNode 更新后调用beforeUnmount新增。在绑定元素的父组件卸载之前调用unmounted当指令与元素解除绑定且父组件已卸载时调用3.钩子函数参数钩子函数的参数与 Vue 2 类似主要有el和binding。el指令绑定的 DOM 元素。binding一个对象包含instance使用指令的组件实例Vue 3 新增用于访问组件上下文替代 Vue 2 中的vnode.context。value传递给指令的值。oldValue先前的值仅在beforeUpdate和updated中可用。arg传递给指令的参数。modifiers包含修饰符的对象。注意Vue 3 的binding对象中没有expression属性vue2中自定义指令的使用-CSDN博客