自定义指令

Vue2

钩子函数执行时间

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数中的参数

• el：指令所绑定的元素，可以用来直接操作 DOM。

• binding：一个对象，包含以下 property：

  • 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 钩子中可用。

局部注册

<template>
    <div>
        <p v-test.bar:foo="testValue">测试自定义指令</p>
        <button @click="change">改变自定义指令绑定的值</button>
    </div>
</template>

<script>
    //自定义指令分别有bind、inserted、update、componentUpdated、unbind五个钩子函数
    //第一次运行，会执行bind、inserted这两个钩子函数
    //更新绑定数据，会执行update、componentUpdated这两个钩子函数
    //解绑自定义指令时，会执行unbind这个钩子函数
    //解绑自定义指令目前只能是移除这个DOM节点
    let test = {
        bind(el,binding,vnode,oldVnode){
            console.log('bind-el',el);
            console.log('bind-binding',binding);
            console.log('bind-vnode',vnode);
            console.log('bind-oldVnode',oldVnode);
        },
        inserted(el,binding,vnode,oldVnode){
            console.log('inserted-el',el);
            console.log('inserted-binding',binding);
            console.log('inserted-vnode',vnode);
            console.log('inserted-oldVnode',oldVnode);
        },
        update(el,binding,vnode,oldVnode){
            console.log('update-el',el);
            console.log('update-binding',binding);
            console.log('update-vnode',vnode);
            console.log('update-oldVnode',oldVnode);
        },
        componentUpdated(el,binding,vnode,oldVnode){
            console.log('componentUpdated-el',el);
            console.log('componentUpdated-binding',binding);
            console.log('componentUpdated-vnode',vnode);
            console.log('componentUpdated-oldVnode',oldVnode);
        },
        unbind(el,binding,vnode,oldVnode){
            console.log('unbind-el',el);
            console.log('unbind-binding',binding);
            console.log('unbind-vnode',vnode);
            console.log('unbind-oldVnode',oldVnode);
        },

    }
    export default {
        data(){
            return{
                testValue:'testValue'
            }
        },
        //使用directives配置项局部注册自定义指令
        directives:{
            test
        },
        methods:{
            change(){
                this.testValue = 'changeValues'
            }
        }
        
    }
</script>

全局注册

    Vue.directive('自定义指令名称'，{钩子函数})

Vue3

相比较于Vue2，自定义指令中的钩子函数有所改变，Vue3中的钩子函数类似于组件的生命周期函数。 全局注册自定义指令不再使用Vue.directive,而是通过如下方式

const app = createApp({}) // 使 v-focus 在所有组件中都可用 
app.directive('focus', { /* ... */ })