Vue.directive的原理与日常使用

一、什么时候需要使用指令
        当我们的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)
          }
        })
      }
    },

人生海海，码途徐徐，在每一段经历中，留下成长的印记，爱自己爱生活爱思考！