Custom directives 让你将 low-level DOM manipulation 封装为可复用的 v-* 属性。当你需要直接访问元素时使用它们（focus、scroll、third-party DOM libraries）— 这些是 components/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>
命名约定：变量 变成指令 。
vFocusv-focusconst 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
Custom directives 是 可复用的、low-level DOM 行为 的正确工具 — autofocus、click-outside、lazy-loading images、tooltips、集成非 Vue DOM 库。
它们将这种命令式 DOM 逻辑保持为封装的和声明式的（v-click-outside）而不是散布在生命周期钩子中。
了解钩子和 binding 对象（value/arg/modifiers），加上在 unmounted 中清理，涵盖了它们的实际使用 — 尽管对于大多数 UI 逻辑来说，components 仍然是更好的选择。