vue2和vue3的自定义指令

什么是自定义指令？

除了核心功能默认内置的指令（`v-model和v-show`），vue也允许注册自定义指令，在vue3中，代码复用和抽象的主要形式是组件，然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

也就是当你要对普通的DOM操作时，或子组件需要实现dom操作时，可以通过自定义指令实现。

• 局部自定义指令：只在组件内有效
• 全局自定义指令：所有组件都有效

 vue中常用的v-指令有那些呢？

v-text 元素的InnerText属性,必须是双标签
v-html 元素的innerHTML
v-if 判断是否插入这个元素
v-else-if
v-else
v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none
v-model 对于输入框实现数据的双向绑定

自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

 自定义指令有五个生命周期（也叫钩子函数）。

        1. bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
        2. inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
        3. update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
        4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
        5. unbind:只调用一次，指令与元素解绑时调用

 

    bind:()=>{//别绑定
        console.log('bind');
    },
    inserted:()=>{//绑定到节点
        console.log('inserted');
    }
    update:()=>{//组件更新
        console.log(update);
    }
    componentUpdated:()=>{//组件更新完成
        console.log(componentUpdated);
    }
    unbind:()=>{//解绑
        console.log('bind');
    }

vue3 自定义指令的变化 

每一个钩子函数中，参数的变化： 

• el: 指令绑定的元素，可以用来直接操作DOM
• binding: 数据对象，包含以下属性

        1. instance: 当前组件的实例，一般推荐指令和组件无关，如果有需要使用组件上下文ViewModel，可以从这里获取
        2. value: 指令的值。
        3. oldValue: 指令的前一个值，在beforeUpdate和Updated 中，可以和value是相同的内容。
        4.arg: 传给指令的参数，例如v-on:click中的click。
        5.modifiers: 包含修饰符的对象。例如v-on.stop:click 可以获取到一个{stop:true}的对象

• vnode: Vue 编译生成的虚拟节点
• prevVNode: Update时的上一个虚拟节点

        1.在Vue 3中钩子函数的生命周期和组件的生命周期类似：
        2.created - 元素创建后，但是属性和事件还没有生效时调用。
        3.beforeMount- 仅调用一次，当指令第一次绑定元素的时候。
        4.mounted- 元素被插入父元素时调用.
        5.beforeUpdate: 在元素自己更新之前调用
        6.updated - 元素或者子元素更新之后调用.
        7.beforeUnmount: 元素卸载前调用.
        8.unmounted -当指令卸载后调用，仅调用一次

全局自定义指令的写法：

let app=createApp(App)
    app.directive('highlight',{
        beforeMount(el,binding,vnode) {
            el.style.background=binding.value
        },
    })

局部自定义指令的写法：

directives:{
        highlight:{
            beforeMount(el,binding,vnode) {
                el.style.background=binding.value
            }
        }
    }