面试题：什么是 Vue 的自定义指令？自定义指令的应用场景有哪些？

在 Vue 中，自定义指令 是一种用于直接操作 DOM 的机制。Vue 提供了一些内置指令（如 v-bind、v-model、v-if 等），但开发者也可以通过自定义指令来扩展 Vue 的功能，实现特定的 DOM 操作。

1. 什么是自定义指令？

自定义指令是 Vue 提供的一种扩展机制，允许开发者注册自己的指令，并在模板中使用。自定义指令的核心是对 DOM 元素进行底层操作，例如：

修改元素的样式。
绑定事件监听器。
操作元素的属性。
集成第三方库。

2. 自定义指令的语法

自定义指令可以通过 Vue.directive 全局注册，也可以在组件中通过 directives 选项局部注册。

全局注册

Vue.directive('focus', {
  // 指令的生命周期钩子
  inserted(el) {
    el.focus(); // 元素插入 DOM 时自动聚焦
  },
});

局部注册

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};

使用自定义指令

<input v-focus>

3. 自定义指令的生命周期钩子

自定义指令可以定义以下生命周期钩子函数：

bind：指令第一次绑定到元素时调用，只调用一次。
inserted：被绑定元素插入父节点时调用。
update：所在组件的 VNode 更新时调用，但可能发生在子 VNode 更新之前。
componentUpdated：所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：指令与元素解绑时调用。

示例

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 初始化操作
    el.style.color = binding.value;
  },
  inserted(el, binding, vnode) {
    // 元素插入 DOM 后的操作
  },
  update(el, binding, vnode) {
    // 组件更新时的操作
  },
  componentUpdated(el, binding, vnode) {
    // 组件及其子组件更新后的操作
  },
  unbind(el, binding, vnode) {
    // 解绑时的清理操作
  },
});

4. 自定义指令的应用场景

自定义指令适用于需要对 DOM 进行底层操作的场景，以下是一些常见的应用场景：

4.1 自动聚焦

在表单中，自动聚焦到某个输入框。

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

4.2 权限控制

根据用户的权限显示或隐藏元素。

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

4.3 集成第三方库

将第三方库（如 jQuery 插件）集成到 Vue 中。

Vue.directive('tooltip', {
  inserted(el, binding) {
    $(el).tooltip({
      title: binding.value,
    });
  },
  unbind(el) {
    $(el).tooltip('destroy');
  },
});

4.4 图片懒加载

实现图片的懒加载功能。

Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          el.src = binding.value;
          observer.unobserve(el);
        }
      });
    });
    observer.observe(el);
  },
});

4.5 拖拽功能

实现元素的拖拽功能。

Vue.directive('drag', {
  inserted(el) {
    el.style.position = 'absolute';
    el.addEventListener('mousedown', (e) => {
      const offsetX = e.clientX - el.offsetLeft;
      const offsetY = e.clientY - el.offsetTop;

      const move = (e) => {
        el.style.left = `${e.clientX - offsetX}px`;
        el.style.top = `${e.clientY - offsetY}px`;
      };

      const up = () => {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', up);
      };

      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', up);
    });
  },
});