Vue 自定义指令的应用场景有哪些？

Vue 的自定义指令允许开发者在模板中以声明方式直接操作 DOM，适用于当核心内置指令（如 v-bind 或 v-model）无法满足底层 DOM 操作需求时的场景。基于实际应用，自定义指令在以下常见场景中广泛使用：

1. DOM 聚焦操作：用于自动聚焦输入框或其他元素，常见于表单页面初始化或导航后需关注用户输入的场景。
   • 例如：登录页面加载时自动定位到用户名输入框。
   • 代码实现：

     <template>
       <input v-focus />
     </template>
     <script>
       export default {
         directives: {
           focus: {
             mounted(el) { el.focus(); }
           }
         }
       };
     </script>
     

2. 动态样式和类绑定：通过自定义指令根据组件状态或数据变化添加、修改或移除元素样式或 CSS 类，适合响应式主题切换或状态驱动的 UI 展示。
   • 示例：基于用户活动状态启用或禁用元素的交互样式。
   • 实现细节（基于 Vue 2）：

     <template>
       <button v-toggle-class="'active'">按钮</button>
     </template>
     <script>
       Vue.directive('toggle-class', {
         inserted(el, binding) {
           el.classList.toggle(binding.value);
         }
       });
     </script>
     

3. 简单样式属性更新：动态赋值 CSS 属性如颜色或字体大小，提供灵活的动态界面调整方案。
   • 例如：根据主题色调整元素文本颜色。
   • 参考实现：

     <template>
       <p v-color="colorHex"></p>
     </template>
     <script>
       Vue.directive('color', {
         bind(el, binding) {
           el.style.color = binding.value;
         }
       });
     </script>
     

4. 基于直接 DOM 的事件监听或交互：封装底层操作如添加第三方库或监听滚动行为，当业务逻辑要求精确控制 DOM 行为。
   • 适用案例：集成复杂的动画组件或懒加载操作。
   • 代码范式（基于钩子函数处理事件）：

     <template>
       <div v-custom-event="handleScroll"></div>
     </template>
     <script>
       Vue.directive('custom-event', {
         mounted(el, binding) {
           el.addEventListener('scroll', binding.value);
         },
         unmounted(el, binding) {
           el.removeEventListener('scroll', binding.value);
         }
       });
     </script>
     

5. 元素尺寸或结构监听：在响应式设计中实时追踪元素大小或位置变化。
   • 使用场景：视口变化后动态调整图片大小或列表布局。

自定义指令优先用于基础 DOM 操作，而非涉及复杂业务逻辑的场景。同时要考虑与 Vue 响应式机制的兼容性，以避免性能问题。[参考编号]