Cum creezi o directivă personalizată?

Question

Accepted Answer

**Directivele personalizate** îți permit să încapsulezi **manipularea DOM de nivel scăzut** ca atribut `v-*` reutilizabil. Folosește-le când ai nevoie de acces direct la un element (focus, scroll, biblioteci DOM de terță parte) — lucruri pe care componente/props nu le acoperă în mod natural. ## Definirea unei directive locale ```vue ``` Convenția de denumire: o variabilă `vFocus` devine directiva `v-focus`. ## Hooks-uri directive (reflectând ciclul de viață al componentei) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Folosind valoarea binding și argumentul ```vue ``` Obiectul `binding` transportă `value` (expresia), `arg` (după colon), `modifiers` (după puncte) și `oldValue`. ## Un exemplu practic: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Înregistrarea globală ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## De ce conteaza Directivele personalizate sunt instrumentul potrivit pentru **comportament DOM reutilizabil de nivel scăzut** — autofocus, click-outside, lazy-loading imagini, tooltips, integrarea bibliotecilor DOM non-Vue. Ele păstrează o astfel de logică imperativă DOM încapsulată și declarativă (`v-click-outside`) mai degrabă decât dispersată în hooks-urile ciclului de viață. Cunoașterea hooks-urilor și a obiectului `binding` (value/arg/modifiers), plus curățarea în `unmounted`, acoperă utilizarea lor practică — deși pentru majoritatea logicii UI, componentele sunt încă alegerea mai bună.