如何在vue中封装自定义指令

- 为什么要封装自定义指令
vue有很多内置指令比如v-if，v-show，这些丰富的指令能满足我们的绝大部分业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令

• 自定义指令有两种注册方式：全局注册和局部注册
  1.全局注册:自定义指令注册好后，在项目的所有组件内都可以直接使用。

  // src/main.js
  import Vue from "vue";
  import App from "./App.vue";
  
  Vue.config.productionTip = false;
  Vue.directive("resize", {
    bind() {},
    inserted() {},
    update() {},
    componentUpdated() {},
    unbind() {},
  });
  new Vue({
    render: (h) => h(App),
  

2.局部注册:自定义指令不是每个组件都会用到的话，我们一般局注册自定义指令就好了

    ```

   <script>
  export default {
   name: "App",
   components: {},
   directives: {
    resize: {
     bind() {},
     inserted() {},
     update() {},
      componentUpdated() {},
      unbind() {},
     },
    },
   };
   </script>
    ```

注意：全局注册指令使用的是directive，局部注册指令使用的是directives，很好理解，局部指令一次性注意注册很多个，全局指令依次只能注册一个。

• 自定义指令中的一些钩子：

bind ：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 ---inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 ---update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。 ---componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 ---unbind：只调用一次，指令与元素解绑时调用

• 实际解决的业务

  v-copy：实现一键复制文本内容，用于鼠标右键粘贴。

  v-longpress： 实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件。

  v-debounce：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

  v-LazyLoad：实现一个图片懒加载指令，只加载浏览器可见区域的图片。

  *例如，我们全局注册一个facus执行，

  ```
  // 注册一个全局自定义指令 `v-focus` 
  Vue.directive('focus', { 
      // 当被绑定的元素插入到 DOM 中时
      inserted: function (el) { 
      // 聚焦元素 
          el.focus() }
      })
  ```
  

以上是我对封装指令的了解！