一、什么时候需要使用指令
当我们的methods中存在操作DOM/BOM的逻辑的时候，就该思考是否可以抽象成一个自定义指令。
二、Vue 自定义指令有全局注册和局部注册两种方式
全局注册：在main.js中全局引入，用Vue.use()使用指令；
import DirectivesAll from '@/directives/index' Vue.use(DirectivesAll)
局部注册：Vue.directive 在注册局部指令时，是通过在组件 options 选项中设置 directives 属性。
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
三、指令的生命周期
1）bind 第一次绑定到DOM元素上的时候触发；
2）update bind完成之后立刻触发，以后每当参数更新的时候都会触发；
3）unbind 解除和DOM元素的绑定时触发 。
四、指令原理（五个钩子函数）
1）bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置；
2）inserted：inserted是在DOM插入父节点之后才触发的(仅保证父节点存在，但不一定已被插入文档中)，而处理inserted是在DOM插入之前，所以这里不可能直接触发，只能是先保存起来，等到节点被插入之后再触发（分为收集和执行）；
3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
4）componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。这个钩子和 inserted 差不多，只是执行的流程不一样。componentUpdated 钩子是更新一个节点就马上执行的，更新一个节点的意思是包括其内部的子节点的。
5）unbind：只调用一次，指令与元素解绑时调用。
注：
inserted和componentUpdated差异：
inserted是所有节点，包括其子节点全部插入后，统一执行inserted钩子；
componentUpdated钩子是更新一个节点就马上执行的；
五、实际使用
实现列表懒加载：
1）定义一个指令
Vue.directive('divLazy', { bind(el, binding) { el.handler = function() { const condition = this.scrollHeight - this.scrollTop <= this.clientHeight if (condition) { binding.value() } } el.addEventListener('scroll', el.handler) }, unbind(el, binding) { el.removeEventListener('scroll', el.handler) } })
2）使用指令
<div v-divLazy="lazyFunc" class="scrollBox"> <div v-for="(item, index) in groupList" :key="index" class="groupItem"> ...... </div> </div> // 懒加载 lazyFunc() { if (this.groupList?.length !== this.groupLength) { this.page++ let obj = { page: this.page, page_size: this.page_size } groupManagement.getGroupList(obj).then((res) => { if (res?.group_infos?.length > 0) { const arr = JSON.parse(JSON.stringify(res.group_infos)) this.groupList.push(...arr) } }) } },
