MST

星途 面试题库

面试题：Vue事件修饰符原理及自定义事件修饰符

阐述Vue事件修饰符的底层实现原理。并请基于Vue的自定义指令机制，实现一个自定义的事件修饰符'myDebounce'，该修饰符用于实现防抖功能，且可以在指令绑定时接收一个时间参数来设置防抖延迟时间。请详细说明实现思路并给出完整代码。
25.3万 热度难度
前端开发Vue

知识考点

AI 面试

面试题答案

一键面试

Vue事件修饰符底层实现原理

Vue事件修饰符是通过在生成的事件处理函数中添加特定逻辑来实现的。例如.prevent修饰符，在事件处理函数内部调用event.preventDefault()方法，阻止默认行为；.stop修饰符则调用event.stopPropagation()方法，阻止事件冒泡。Vue在编译模板时，会识别这些修饰符，并在生成的渲染函数中注入相应的处理逻辑。

实现自定义事件修饰符 myDebounce 的思路

  1. 利用Vue自定义指令机制：通过Vue.directive定义一个新指令。
  2. 绑定事件：在指令的bind钩子函数中，为元素绑定事件监听器。
  3. 实现防抖逻辑：使用setTimeout和clearTimeout来控制事件触发频率，根据传入的延迟时间参数决定防抖效果。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-myDebounce:input="handleInput" :myDebounce="500">
  </div>
  <script>
    Vue.directive('myDebounce', {
      bind(el, binding, vnode) {
        let timer;
        el.addEventListener(binding.arg, () => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            vnode.context[binding.value]();
          }, binding.value || binding.modifiers.myDebounce);
        });
      }
    });

    new Vue({
      el: '#app',
      methods: {
        handleInput() {
          console.log('Input event triggered with debounce');
        }
      }
    });
  </script>
</body>

</html>

在上述代码中：

  • Vue.directive('myDebounce' 定义了一个名为 myDebounce 的自定义指令。
  • bind 钩子函数中，通过 addEventListener 为元素绑定事件（事件类型由 binding.arg 决定，这里是 input）。
  • 每次事件触发时，先清除之前的定时器（如果存在），然后根据 binding.value（即指令绑定时传入的时间参数） 或 binding.modifiers.myDebounce（如果未传入参数，使用默认值） 设置新的定时器来延迟执行实际的事件处理函数 vnode.context[binding.value]()。