10.1.1 全局自定义指令-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 10.1.1 全局自定义指令

在Vue.js的世界里，指令（Directives）是Vue模板语法的核心组成部分之一，它们为模板中的元素提供了额外的、可复用的功能。Vue.js内置了一系列指令，如`v-bind`、`v-model`、`v-if`等，用于处理DOM更新、事件监听、条件渲染等常见任务。然而，Vue.js也允许开发者通过注册自定义指令来扩展其功能，以满足特定的开发需求。本章将深入探讨Vue.js中的全局自定义指令，包括其定义方式、生命周期钩子、参数与修饰符的使用，以及实际应用场景。

#### 10.1.1.1 自定义指令基础

自定义指令是Vue.js提供的一种高级功能，允许你对DOM进行低层次的直接操作。自定义指令通过Vue.directive()方法全局注册，或者在组件的directives选项中局部注册。全局注册的自定义指令在所有新创建的Vue实例中可用，而局部注册的则仅在该组件及其子组件中有效。

**全局注册自定义指令**

全局注册自定义指令的基本语法如下：

```javascript
Vue.directive('my-directive', {
  // 当被绑定的元素插入到DOM中时……
  inserted: function (el, binding, vnode, oldVnode) {
    // 逻辑……
  },
  // 当绑定元素所在组件的 VNode 更新时，但也可能发生在其子 VNode 更新之前……
  update: function (el, binding, vnode, oldVnode) {
    // 根据最新值执行对应的DOM更新逻辑……
  },
  // 只调用一次，指令第一次绑定到元素时调用。
  // 在这里可以进行一次性的初始化设置。
  bind: function (el, binding, vnode) {
    // 逻辑……
  },
  // 只调用一次，指令与元素解绑时调用
  unbind: function (el, binding, vnode) {
    // 清理工作，如事件监听器解绑等……
  }
});
```

在上述代码中，`my-directive`是自定义指令的名称（不带`v-`前缀），函数对象定义了指令的钩子函数。这些钩子函数提供了在不同时刻对DOM元素进行操作的能力：

- **bind**：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- **inserted**：被绑定元素插入父节点时调用（保证父节点存在，但不一定已被插入文档中）。
- **update**：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
- **componentUpdated**：指令所在组件的VNode及其子VNode全部更新后调用。
- **unbind**：只调用一次，指令与元素解绑时调用。

#### 10.1.1.2 钩子函数参数详解

在自定义指令的钩子函数中，你可以接收到几个参数，它们提供了关于指令上下文的重要信息：

- **el**：指令所绑定的元素，可以直接操作DOM。
- **binding**：一个对象，包含了以下属性：
  - `name`：指令名，不包括`v-`前缀。
  - `value`：指令的绑定值，例如：`v-my-directive="1 + 1"`中，绑定值为`2`。
  - `oldValue`：指令绑定的前一个值，仅在`update`和`componentUpdated`钩子中可用。无论值是否变化都可用。
  - `expression`：字符串形式的指令表达式。例如`v-my-directive="1 + 1"`中，表达式为`"1 + 1"`。
  - `arg`：传给指令的参数，可选。例如`v-my-directive:foo`中，参数为`"foo"`。
  - `modifiers`：一个包含修饰符的对象。例如：`v-my-directive.mod1.mod2`中，修饰符对象为`{ mod1: true, mod2: true }`。
- **vnode**：Vue编译生成的虚拟节点。
- **oldVnode**：上一个虚拟节点，仅在`update`和`componentUpdated`钩子中可用。

#### 10.1.1.3 应用场景示例

**示例1：自动聚焦输入框**

在表单中，经常需要自动聚焦到某个输入框，以提高用户体验。使用自定义指令可以轻松实现这一功能：

```javascript
Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted: function (el) {
    el.focus();
  }
});

// 使用
<input v-focus>
```

**示例2：动态样式绑定**

假设你需要根据组件的状态动态地给元素添加类名或样式，但又不想在模板中直接写复杂的逻辑，这时可以定义一个自定义指令来处理：

```javascript
Vue.directive('dynamic-style', {
  update: function (el, binding) {
    if (typeof binding.value === 'object') {
      for (let name in binding.value) {
        el.style[name] = binding.value[name];
      }
    }
  }
});

// 使用
<div v-dynamic-style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```

**示例3：拖拽功能**

自定义指令还可以用来实现复杂的DOM操作，如拖拽功能。这里仅展示一个简化的例子：

```javascript
Vue.directive('draggable', {
  bind: function (el) {
    el.style.cursor = 'move';
    el.draggable = true;

// 添加拖拽逻辑……
  },
  unbind: function (el) {
    // 清理拖拽逻辑……
  }
});

// 使用
<div v-draggable>拖拽我</div>
```

注意，这里的拖拽逻辑需要你自己实现，包括监听鼠标事件、计算位置等。

#### 10.1.1.4 小结

全局自定义指令是Vue.js提供的一个强大的功能，它允许开发者通过定义可复用的DOM操作逻辑来扩展Vue的模板能力。通过合理利用自定义指令，不仅可以提高开发效率，还能让Vue应用的模板更加清晰、易于维护。在编写自定义指令时，要注意合理地使用钩子函数，以及妥善处理DOM的更新和清理工作，避免内存泄漏等问题。同时，也要注意自定义指令的命名规范，避免与Vue的内置指令冲突。

该分类下的相关小册推荐：

Vue面试指南

移动端开发指南

Vue源码完全解析

Vue.js从入门到精通(四)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(一)

vuejs组件实例与底层原理精讲

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(五)

VUE组件基础与实战

Vue.js从入门到精通(一)

Vue原理与源码解析