面试题：Vue中自定义指令结合组件事件绑定与解绑的深度应用

实现思路

定义指令：在Vue中，通过Vue.directive方法定义一个名为v-myEvent的自定义指令。
绑定事件：在指令的bind钩子函数中，根据传入的参数确定要绑定的事件类型，并为元素添加相应的事件监听器。监听器函数内部逻辑可根据组件状态决定是否执行实际操作。
动态处理：通过在指令中设置一个标志变量，结合组件状态来动态决定是否真正绑定或解绑事件。
解绑事件：在指令的unbind钩子函数中，移除绑定在元素上的事件监听器，确保组件销毁时不会造成内存泄漏。

核心代码

<template>
  <div>
    <input v-myEvent:input="handleInput" :is-active="isActive" />
    <button v-myEvent:click="handleClick" :is-active="isActive">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  methods: {
    handleInput() {
      console.log('Input event triggered');
    },
    handleClick() {
      console.log('Click event triggered');
    }
  }
};
</script>

<script>
Vue.directive('myEvent', {
  bind(el, binding, vnode) {
    const eventType = binding.arg;
    const handler = binding.value;
    const isActive = binding.modifiers.isActive;
    if (isActive) {
      el.addEventListener(eventType, handler);
    }
  },
  unbind(el, binding) {
    const eventType = binding.arg;
    const handler = binding.value;
    const isActive = binding.modifiers.isActive;
    if (isActive) {
      el.removeEventListener(eventType, handler);
    }
  }
});
</script>

在上述代码中：

模板部分：展示了如何使用v-myEvent指令，传入不同的事件类型（input和click）以及对应的处理函数，并通过is-active修饰符控制是否真正绑定事件。
Vue组件部分：定义了组件的data和methods，其中isActive用于控制指令是否生效，handleInput和handleClick是事件处理函数。
指令定义部分：bind钩子函数在指令绑定到元素时，根据is-active修饰符判断是否添加事件监听器；unbind钩子函数在指令从元素解绑时，同样根据is-active修饰符判断是否移除事件监听器。

星途面试题库

面试题：Vue中自定义指令结合组件事件绑定与解绑的深度应用

知识考点

面试题答案

实现思路

核心代码