Vue中自定义指令的理解，应用场景有哪些？

一、什么是指令

指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力。

我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能

二、如何实现

注册一个自定义指令有全局注册与局部注册

全局注册主要是通过Vue.directive方法进行注册。

Vue.directive第一个参数是指令的名字(不需要写上v-前缀)，第二个参数可以是对象数据，也可以是一个指令函数。

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

局部注册通过在组件options选项中设置directive属性

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

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus />

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

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

三、应用场景

• 表单防止重复提交
• 图片的懒加载
• 一键Copy的功能

关于自定义指令还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景。