vue-java-tutorials/vue2-tutorials/import-script/14-自定义指令_函数式.md

Vue2 自定义指令全面指南

指令中的作用域时window！！！

一、指令类型对比

类型	语法	触发时机	适用场景
函数式	directives: { big(el, binding) {} }	bind + update	简单DOM操作
对象式	directives: { fbind: { hooks } }	完整生命周期	复杂交互

二、对象式指令详解

1. 完整生命周期钩子

fbind: {
    // 指令第一次绑定到元素时调用（初始化设置）
    bind(el, binding) {
        el.value = binding.value;
    },
    // 被绑定元素插入父节点时调用
    inserted(el, binding) {
        el.focus(); // 自动获取焦点
    },
    // 所在组件更新时调用
    update(el, binding) {
        el.value = binding.value;
        el.focus(); // 值更新后重新聚焦
    }
}

2. 执行流程示例

1. 初始化时：bind → inserted
2. 数据更新时：update
3. 模板重新解析时：update

三、最佳实践建议

1. 输入框增强指令

Vue.directive('input-enhanced', {
    inserted(el) {
        el.select(); // 自动选中文本
    },
    update(el) {
        // 防抖处理避免频繁触发
        clearTimeout(el._timer);
        el._timer = setTimeout(() => {
            el.select();
        }, 300);
    },
    unbind(el) {
        // 清理工作
        clearTimeout(el._timer);
    }
});

2. 性能优化技巧

update(el, binding) {
    if (binding.value !== binding.oldValue) {
        // 只有值变化时才执行操作
        el.value = binding.value;
    }
}

四、高级应用场景

1. 权限控制指令

Vue.directive('permission', {
    inserted(el, binding) {
        if (!checkPermission(binding.value)) {
            el.parentNode.removeChild(el);
        }
    }
});

使用方式：

<button v-permission="'admin'">管理按钮</button>

2. 拖拽指令实现

Vue.directive('drag', {
    inserted(el) {
        el.style.cursor = 'move';
        el.onmousedown = function(e) {
            // 拖拽逻辑实现
        }
    },
    unbind(el) {
        el.onmousedown = null; // 清理事件
    }
});

五、常见问题解决方案

1. 指令不生效问题排查

   • 检查指令名称是否使用kebab-case（短横线）
   • 确认绑定值是否为响应式数据
   • 验证是否在正确的生命周期钩子操作DOM

2. 动态指令参数

<div v-demo:[dynamicArg]="value"></div>

binding.arg // 获取动态参数

3. 多修饰符处理

if (binding.modifiers.large) {
    el.style.fontSize = '20px';
}
if (binding.modifiers.red) {
    el.style.color = 'red';
}

六、与Vue3的对比

特性	Vue2	Vue3
钩子名称	bind → beforeMount
	inserted → mounted
	新增beforeUpdate
参数传递	通过binding对象	更直观的上下文参数
组合式API	无	支持setup中使用指令