Encuentro en la declaración de tipo Vue3 sobre Directive , es esto
export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>; Creo que la mayoría de la gente está familiarizada con 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; } Pero, ¿qué es 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;Traté de encontrar información útil al respecto en la documentación oficial, pero no obtuve nada.
Entonces, ¿quién puede decirme qué es esto y cómo usarlo?
Hay 2 formas de declarar una directiva Vue : usando una sintaxis de objeto, donde declara todos los ganchos que le interesan a su directiva y una sintaxis funcional, donde pasa una función y esa función se usa para ganchos mounted y updated
Entonces declarando la directiva usando:
const hook = (el, binding) => { // do some stuff } app.directive('my-directive', hook)...es lo mismo que:
const hook = (el, binding) => { // do some stuff } app.directive('my-directive', { mounted: hook, updated: hook, })