【Vue3】自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

1. 生命周期钩子函数

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

在 

• 0：该 div 元素。
• 1：传入的参数等。比如 arg 参数，modifiers 自定义修饰符，dir 目录，传入的 value 值，instance 组件实例。
• 2：当前组件的虚拟 DOM
• 3：上一个虚拟 DOM

2. 指令简写

应用场景1：按钮鉴权

根据能否从 localStorage（或者后台返回） 中获取数据，来判断是否显示某个按钮。

应用场景2：鼠标拖拽

拖拽粉色框移动大盒子。

应用场景3：懒加载

let imageList = import.meta.glob('./assets/images/*.*', { eager: true })

let imageList = import.meta.glob('./assets/images/*.*')

 // 判断图片是否在可视区
 const observer = new IntersectionObserver((e)=> {
   console.log(e[0]);
 })  
 // 监听元素
 observer.observe(el)