カスタムディレクティブ を使用すると、低レベルのDOM操作 を再利用可能な v-* 属性としてカプセル化できます。要素に直接アクセスする必要がある場合（focus、scroll、サードパーティ DOM ライブラリ）— コンポーネント/props では自然にはカバーされないものに使用します。
<script setup>
// a directive is an object of lifecycle hooks; in <script setup>, name it vXxx
const vFocus = {
mounted(el) {
el.focus(); // `el` is the raw DOM element
},
};
</script>
<template>
<input v-focus /> <!-- autofocuses on mount -->
</template>
命名規則: 変数 vFocus はディレクティブ v-focus になります。
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
};
<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(); };
document.addEventListener("click", el._handler);
},
unmounted(el) {
document.removeEventListener("click", el._handler); // cleanup!
},
};
// usage: <div v-click-outside="closeMenu">...</div>
app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere
カスタムディレクティブは、再利用可能で低レベルの DOM 動作 — オートフォーカス、click-outside、画像の遅延読み込み、ツールチップ、Vue 以外の DOM ライブラリの統合 — の正しいツールです。
このような命令形の DOM ロジックをカプセル化し、宣言的（v-click-outside）に保ち、ライフサイクルフックに分散させません。
フックと binding オブジェクト（value/arg/modifiers）、そして unmounted でのクリーンアップを知ることで、その実用的な使用をカバーしています — ただし、ほとんどの UI ロジックでは、コンポーネントがより良い選択です。