vue3自定义指令

官方文档

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

钩子函数

el：指定绑定到的元素，可以直接操作dom
binding: 对象 包含以下属性
value: 传递给指令的值
oldValue:仅在beforeUpdate和updated中使用 无论值是否更改，都可以用
arg: 传递给指令的参数 例如my-directive:foo 参数便是foo
modifiers：修饰符对象 例如：v-my-directive.foo.bar 修饰符对象是{foo:true,bar:true}
instance:使用该指令的组件实例
dir:指令定义的对象
vnode:代表绑定元素底层的VNode
prevnode:代表之前的渲染中指令绑定元素的VNode仅在beforeUpdate和updated钩子中使用

注意：不推荐在组件上使用自定义指定 ，当应用到一个多根组件时，指令将会被忽略且抛出一个警告