此处使用原官网的栗子

在自定义组件中，而并非全局注册的自定义指令

<template>
    <div>
        <input type="text" v-focus v-model="input">
    </div>
</template>
<script>
    export default {
        data() {
            return {
                input: ''
            }
        },
        directives: {
            focus: {
                // 指令的定义
                bind(el, binding, vnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log('只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置')
                },
                inserted(el, binding, vnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log('被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。')
                    el.focus()
                },
                update(el, binding, vnode, oldVnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log(oldVnode, '---oldVnode')
                    // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
                    window.console.log('所在组件的 VNode 更新时调用')
                },
                componentUpdated(el, binding, vnode, oldVnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log(oldVnode, '---oldVnode')
                    window.console.log('指令所在组件的 VNode 及其子 VNode 全部更新后调用。')
                },
                unbind(el, binding, vnode) {
                    window.console.log('只调用一次，指令与元素解绑时调用。')
                }
            }
        }
    }
</script>

image.png

组件更新时触发update和componentUpdated两个钩子函数

image.png

钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1"中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

展开详细说一下binding对象中的属性

<template>
    <div>
        --原生仅有一个单独的指令--
        <input type="text" v-focus v-model="input1">
        --给指令绑定了值，并且包含一个修饰符--
        <input type="text" v-focus.name="'指令绑定的值'" v-model="input2">
        --给自定义指令传递参数--
        <input type="text" v-focus:args v-model="input3">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                header: '来自子组件的头部消息',
                input1: '',
                input2: '',
                input3: ''
            }
        },
        directives: {
            focus: {
                // 指令的定义
                bind(el, binding, vnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log('只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置')
                },
                inserted(el, binding, vnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log('被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。')
                    el.focus()
                },
                update(el, binding, vnode, oldVnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log(oldVnode, '---oldVnode')
                    // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
                    window.console.log('所在组件的 VNode 更新时调用')
                },
                componentUpdated(el, binding, vnode, oldVnode) {
                    window.console.group('-----------------------------------------------------------')
                    window.console.log(el, '---el')
                    window.console.log(binding, '---binding')
                    window.console.log(vnode, '---vnode')
                    window.console.log(oldVnode, '---oldVnode')
                    window.console.log('指令所在组件的 VNode 及其子 VNode 全部更新后调用。')
                },
                unbind(el, binding, vnode) {
                    window.console.log('只调用一次，指令与元素解绑时调用。')
                }
            }
        }
    }
</script>

image.png

对应红框中的内容
{
name: 自定义组件的名称，
expression：字符串形式的指令表达式（例如 v-my-directive="1 + 1"中，表达式为 "1 + 1"。），
modifiers：包含修饰符的对象（v-focus.name），
value：给自定义指令绑定的值（v-focus="'指令绑定的值'"），
rawName：未加工过的名称（指令在使用时的样子）,
arg: 传给指令的参数
}

vue 自定义指令

vue 自定义指令

此处使用原官网的栗子

钩子函数参数