面试官：你写过自定义指令吗？说说有那些应用场景？

今天我们来聊聊 Vue 中的自定义指令，或者说面试官可能问到的一个问题：“你有写过自定义指令吗？自定义指令的应用场景有哪些？”这个问题看似很简单，但涉及到的知识点其实有点多，尤其是对于 Vue 开发者来说，掌握了自定义指令，不仅能让代码更简洁，还能为项目带来不少便利。

那么，我们先从基础说起。先给大家普及一下指令这个概念——指令系统。你可以理解为它是 Vue 提供的一个机制，能让我们以声明式的方式来控制 DOM 元素的行为。最常见的就是那些以 v- 开头的指令，比如 v-model、v-show，这些都是 Vue 内置的指令，它们的作用可以帮助我们轻松地绑定数据和控制视图。

什么是自定义指令

简单来说，自定义指令就是 Vue 提供给开发者的扩展功能。我们可以通过它们在 Vue 实例中进行更细致的 DOM 操作。比如，我们可以自定义一个指令，让一个输入框在页面加载后自动聚焦，这样就能简化代码，减少重复操作。

自定义指令有两种注册方式：全局注册和局部注册。全局注册时，我们通过 Vue.directive() 方法来注册，而局部注册则是在某个特定组件中使用 directives 选项来实现。

全局注册

全局注册的好处是，整个应用中都可以使用这个自定义指令。举个例子，假设你想让某个输入框在页面加载后自动聚焦：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
})

这样，v-focus 就成了一个全局指令，你只需要在任何地方加上 v-focus，比如在模板中这样写：

<input v-focus />

这个输入框就会在页面加载完后自动获取焦点，省去了很多麻烦。

局部注册

局部注册则是把指令只作用于某个组件。举个例子，如果你只希望在某个组件内部使用 v-focus，你可以在组件的 directives 选项中进行注册：

directives: {
  focus: {
    inserted: function (el) {
      el.focus();
    }
  }
}

然后在该组件模板中使用：

<input v-focus />

自定义指令的钩子函数

自定义指令不仅可以做简单的操作，它还有一套完善的生命周期钩子函数。具体来说，这些钩子函数可以让你在不同的时机对指令绑定的元素进行处理。钩子函数有：

• bind：指令第一次绑定到元素时调用，适合做初始化设置。
• inserted：当元素插入父节点时调用，通常用于做 DOM 操作。
• update：当绑定的值发生变化时调用。
• componentUpdated：在组件及其子组件的虚拟 DOM 完全更新后调用。
• unbind：指令与元素解绑时调用。

举个简单的例子：

Vue.directive('demo', {
  bind(el, binding) {
    console.log(binding.value); // 输出指令的绑定值
  },
  inserted(el) {
    el.style.color = 'red'; // 插入元素后改变其颜色
  },
  unbind(el) {
    console.log('解绑指令');
  }
});

自定义指令的应用场景

那么，自定义指令到底能用在哪些地方呢？这其实取决于你对 DOM 操作的需求。Vue 提供的内置指令已经涵盖了大多数常见场景，但有些特殊需求就需要我们自定义指令来解决了。比如说：

1. 表单防止重复提交

有些场景下，我们不希望用户在点击按钮后重复提交表单。为了避免这种情况，我们可以用自定义指令来控制按钮的点击频率。例如，我们可以定义一个 v-throttle 指令，来控制按钮点击的节流：

Vue.directive('throttle', {
  bind(el, binding) {
    let throttleTime = binding.value || 2000;
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) {
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  }
});

在模板中使用：

<button @click="submitForm" v-throttle="2000">提交</button>

这样，按钮点击后，2秒内即使用户再次点击，也不会触发提交事件，有效防止了重复提交。

2. 图片懒加载

对于长列表或者图片较多的页面，我们可以用懒加载来提高性能，避免一次性加载所有图片。通过自定义指令来实现懒加载，确保图片只有在进入视口时才会加载。比如，定义一个 v-lazy 指令：

Vue.directive('lazy', {
  bind(el, binding) {
    let realSrc = binding.value;
    el.setAttribute('src', realSrc);
    el.setAttribute('src', 'loading.jpg'); // 设置一个加载中的占位图
  },
  inserted(el) {
    if ('IntersectionObserver' in window) {
      let observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
          let realSrc = el.dataset.src;
          el.src = realSrc;
          el.removeAttribute('src');
        }
      });
      observer.observe(el);
    }
  }
});

这样，只有当图片元素即将出现在用户视口内时，图片才会加载，从而减少不必要的网络请求。

3. 一键复制

有时候，我们需要在网页中实现一键复制功能，比如在某个区域点击一下就能复制里面的内容。我们可以通过自定义指令来实现这个功能：

Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const text = binding.value;
      navigator.clipboard.writeText(text).then(() => {
        alert('复制成功！');
      });
    });
  }
});

然后在模板中使用：

<button v-copy="'This is the text to copy'">点击复制</button>

每次点击按钮时，指定的文本就会被复制到剪贴板。

看完这些例子，大家可能会发现，Vue 的自定义指令其实非常强大，能帮助我们更方便地管理一些复杂的 DOM 操作，且能提高代码的复用性。无论是处理表单的节流、图片懒加载，还是实现一键复制的功能，自定义指令都能发挥它应有的作用。

面试官问你有没有写过自定义指令，这个问题看似简单，但从指令的定义、注册、钩子函数到实际应用，都是对你 Vue 开发能力的一个综合考察。如果你能够熟练地回答这些问题，并结合实际项目经验给出一些具体的例子，那么你一定能在面试中脱颖而出。