Vue 基础面试题, 什么是 Vue 的自定义指令?自定义指令的应用场景有哪些?

Step 1

Q:: 什么是 Vue 的自定义指令？

A:: Vue 的自定义指令是开发者在 Vue.js 中定义的特定 DOM 元素行为的方式。除了 Vue 内置的指令（如 v-if、v-for 等），开发者还可以通过自定义指令实现 DOM 元素的特定行为，如自动聚焦、拖拽、权限控制等。自定义指令一般通过 Vue.directive 方法进行注册，可以是全局指令，也可以是局部指令。

Step 2

Q:: 自定义指令的生命周期钩子有哪些？

A:: Vue 自定义指令提供了几个生命周期钩子来操作 DOM 元素，包括 bind（指令第一次绑定到元素时调用），inserted（元素被插入父节点时调用），update（组件的 VNode 更新时调用），componentUpdated（组件 VNode 及其子 VNode 全部更新后调用），unbind（指令与元素解绑时调用）。

Step 3

Q:: 自定义指令的应用场景有哪些？

A:: 自定义指令主要应用于需要直接操作 DOM 元素的场景。例如，自动聚焦输入框，处理元素的拖拽功能，结合权限控制显示/隐藏元素，以及自定义滚动条行为等。在这些场景中，自定义指令能够减少模板代码重复，提高代码的可复用性和可维护性。

Step 4

Q:: 如何创建一个 Vue 自定义指令？

A:: 创建 Vue 自定义指令可以通过 Vue.directive 方法。例如，创建一个自动聚焦的指令 v-focus：

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

在模板中使用该指令时，只需要在需要自动聚焦的元素上添加 v-focus 即可。