[JavaScript知识库]vue3 自定义指令 directive

目的：在vue项目中编写一些符合自己业务的指令
分类：
全局指令，全部组件都能使用
在main.js中挂载到app上
app.directive(‘focus’, {

  mounted(el) {
    
    el.focus()
  }

})
局部指令
在组件内部使用
directives：{

}
指令的生命周期
created
在绑定元素的父组件挂载之前
beforeMounted
在绑定元素的父组件挂载之后
mounted
在绑定元素的父组件vnode更新之前
beforeUpdate
在包含组件的 VNode 及其子组件的 VNode 更新之后调用
update
在绑定元素的父组件卸载之前调用
beforUnmounted
在绑定元素的父组件卸载之后调用
unmounted
指令与元素解除绑定，切父组件已经卸载，只调用一次

实例代码：
指令JS文件

const demo={
    created:(el,binding)=>{
        
        console.log('created')
        console.log(el)
        console.log(binding)
    },
    beforeMount:(el,binding)=>{
        console.log('beforeMount')
        console.log(el)
        console.log(binding)
    },
    mounted:(el,binding)=>{
        console.log(el)
        console.log(binding)
        console.log('111111')
    },
    updated:()=>{
        console.log('updated')
    },
    beforeUnmount:()=>{
        console.log('beforeUnmount')
    },  
    unmounted:()=>{
        console.log('unmounted')
    }
}

export {
    demo
}

父组件中注册自定义指令

directives: {
    demo: demo,
  },

父组件使用自定义指令

<div v-demo v-if="isShow">{{ name11 }}</div>

总结：

1. 自定义指令就是自己写一个对象函数，并且能接受绑定元素的一些属性
2. 自定义指令也有自己的生命周期函数
3. 当指令需要生命周期函数的时候，属性值是个对象，对象里面包括 生命周期 函数
4. 如果只需要mounted函数，可以简写为一个函数，不再需要对象函数
5. 每个生命周期函数接受的参数为 el binding vnode prevnode

仅记录平常学习