自定义指令及其使用场景有哪些？

[GGXXMM]

自定义指令（允许用户注册指令扩展Vue功能）

除了 v-model、v-for等内置指令，Vue也允许注册自定义指令。主要有以下2种注册方式：

• 全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})

• 局部注册：组件中接收一个 directives 的选项

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

自定义指令也像组件那样存在钩子函数：

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

使用场景

1、权限校验 v-permission

2、复制指令 v-copy

3、长按 v-longpress

4、防抖节流 v-debounce

5、图片懒加载 v-lazy

6、拖拽 v-draggable

...