描述下 Vue 自定义指令

类别：vue / 日期：2022-08-26 / 浏览：472 / 评论：0

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对 DOM 元素进行底层操作时使用，尽量只用来操作 DOM 展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定 v-model 的值也不会同步更新；如必须修改可以在自定义指令中使用 keydown 事件，在 vue 组件中使用 change 事件，回调中修改 vue 数据;

（1）自定义指令基本内容

• 全局定义：Vue.directive("focus",{})

• 局部定义：directives:{focus:{}}

• 钩子函数：指令定义对象提供钩子函数

  o bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  o inSerted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。

  o update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前调用。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

  o ComponentUpdate：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  o unbind：只调用一次，指令与元素解绑时调用。

• 钩子函数参数 o el：绑定元素

  o bing：指令核心对象，描述指令全部信息属性

  o name

  o value

  o oldValue

  o expression

  o arg

  o modifers

  o vnode   虚拟节点

  o oldVnode：上一个虚拟节点（更新钩子函数中才有用）

（2）使用场景

• 普通 DOM 元素进行底层操作的时候，可以使用自定义指令

• 自定义指令是用来操作 DOM 的。尽管 Vue 推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的 DOM 操作，并且是可复用的。

（3）使用案例

初级应用：

• 鼠标聚焦

• 下拉菜单

• 相对时间转换

• 滚动动画

高级应用：

• 自定义指令实现图片懒加载

• 自定义指令集成第三方插件