如何在 Vue 3 中使用函数指令？

Question

我在Vue3 Type Declaration中找到关于Directive，就是这个

export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;

相信大多数人都不陌生ObjectDirective

export declare interface ObjectDirective<T = any, V = any> {
    created?: DirectiveHook<T, null, V>;
    beforeMount?: DirectiveHook<T, null, V>;
    mounted?: DirectiveHook<T, null, V>;
    beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>;
    updated?: DirectiveHook<T, VNode<any, T>, V>;
    beforeUnmount?: DirectiveHook<T, null, V>;
    unmounted?: DirectiveHook<T, null, V>;
    getSSRProps?: SSRDirectiveHook;
    deep?: boolean;
}

但是 FunctionDirective 是什么？

export declare type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>;

export declare type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (el: T, binding: DirectiveBinding<V>, vnode: VNode<any, T>, prevVNode: Prev) => void;

我试图在官方文档中找到一些关于它的有用信息，但没有获得。

谁能告诉我这是什么以及如何使用它？

Answer 1

那里 2 ways to declare a Vue directive - 使用对象语法，在其中声明您的指令感兴趣的所有挂钩和函数语法，在其中传递一个函数，该函数用于 mounted和 updated 钩子

所以声明指令使用：

const hook = (el, binding) => {
  // do some stuff
}

app.directive('my-directive', hook)

...等同于：

const hook = (el, binding) => {
  // do some stuff
}

app.directive('my-directive', {
  mounted: hook,
  updated: hook,
})

如何在 Vue 3 中使用函数指令？

How to use FunctionDirective in Vue3?

javascript

vue.js

vuejs3