Vue自定义指令

214 阅读1分钟

本文主要介绍Vue的自定义指令

1 - 生命周期

自定义指令的生命周期:

1.1 - vue2版本

  • bind - 指令绑定到元素后调用。只调用一次。
  • inserted - 元素插入父 DOM 后调用。
  • update - 当元素更新,但子元素尚未更新时,将调用此钩子。
  • componentUpdated - 一旦组件和子级被更新,就会调用这个钩子。
  • unbind - 一旦指令被移除,就会调用这个钩子。也只调用一次。

1.2 - vue3版本

  • created - 新增!在元素的 attribute 或事件监听器被应用之前调用。
  • bind → beforeMount - 指令绑定到元素后调用。只调用一次。
  • inserted → mounted - 元素插入父 DOM 后调用
  • beforeUpdate:新增!在元素本身被更新之前调用,与组件的生命周期钩子十分相似。
  • update → 移除!该钩子与 updated 有太多相似之处,因此它是多余的。请改用 updated
  • componentUpdated → updated - 当元素更新,但子元素尚未更新时,将调用此钩子。
  • beforeUnmount:新增!与组件的生命周期钩子类似,它将在元素被卸载之前调用。
  • unbind -> unmounted

2 - 四个参数

对于每个生命周期都会有四个参数传入 el binding vnode preVnode
el: 当前绑定的DOM元素;
binding: 当前指令绑定的修饰符(modifiers)以及传入的值(value);
vnode: 当前的虚拟节点;
preVnode: 上一个虚拟节点;

2 - 自定义指令的两种方法

2.1 - 局部注册方法

使用directives属性进行注册自定义指令,指令名称不用手动加v-前缀

image.png

2.1 - 全局注册方法

image.png