커스텀 디렉티브는 저수준 DOM 조작을 재사용 가능한 v-* 속성으로 캡슐화하게 해줍니다. 요소에 직접 접근해야 할 때 사용합니다(포커스, 스크롤, 서드파티 DOM 라이브러리) — 컴포넌트/props가 자연스럽게 다루지 못하는 것들입니다.
<script setup>
// 디렉티브는 라이프사이클 훅 객체임; <script setup>에서는 vXxx로 이름 지음
const vFocus = {
mounted(el) {
el.focus(); // `el`은 원시 DOM 요소
},
};
</script>
<template>
<input v-focus /> <!-- 마운트 시 자동 포커스 -->
</template>
명명 규칙: 변수 는 디렉티브 가 됩니다.
vFocusv-focusconst vDemo = {
created(el, binding) {}, // 속성/리스너 적용 전
mounted(el, binding) {}, // 요소가 DOM에 삽입됨
updated(el, binding) {}, // 포함하는 컴포넌트가 업데이트된 후
unmounted(el) {}, // 요소 제거됨 — 여기서 정리
};
<script setup>
const vColor = {
mounted(el, binding) {
el.style.color = binding.value; // v-color="'red'" → binding.value = 'red'
el.style.fontSize = binding.arg + "px"; // v-color:16 → binding.arg = '16'
if (binding.modifiers.bold) el.style.fontWeight = "bold"; // v-color.bold
},
};
</script>
<template>
<p v-color:16.bold="textColor">Styled text</p>
</template>
binding 객체는 value(표현식), arg(콜론 뒤), modifiers(점 뒤), oldValue를 담고 있습니다.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => { if (!el.contains(e.target)) binding.value(); };
.(, el.);
},
() {
.(, el.);
},
};
app.directive("focus", { mounted: (el) => el.focus() }); // 어디서나 사용 가능
커스텀 디렉티브는 재사용 가능한 저수준 DOM 동작에 적합한 도구입니다 — 자동 포커스, click-outside, 이미지 지연 로딩, 툴팁, 비-Vue DOM 라이브러리 통합.
이러한 명령형 DOM 로직을 라이프사이클 훅에 흩어놓는 대신 캡슐화하고 선언적으로(v-click-outside) 유지합니다.
훅과 binding 객체(value/arg/modifiers)를 알고 unmounted에서 정리하는 것이 실용적 사용을 포괄합니다 — 다만 대부분의 UI 로직에는 여전히 컴포넌트가 더 나은 선택입니다.