Vue.js 中的指令（Vue自界说指令）

Vue.js 中的指令作用

在 Vue.js[1] 中，指令是个非常告急的概念，它可以用来扩展 Vue.js 的功能，提供了丰富的指令来简化开发者的工作。本文将对除了内置指令外，Vue.js 还支持自界说指令，开发者可以根据本身的需求扩展 Vue.js 的指令库。Vue.js 3.x 相较于 Vue.js 2.x 在自界说指令方面进行了一些改进，本文将先容 Vue.js 3.x 中自界说指令的使用方法。
什么是自界说指令

1. 概念先容

在 Vue.js 中，指令 (Directives) 是一种带有 v- 前缀的特殊属性。它的作用是「当其绑定的元素被插入到 DOM 中时，会立即执行一些行为」。 Vue.js 中有许多内置指令，比如:

• v-model：在表单元素上创建「双向数据绑定」；
  
• v-show：根据表达式之真假值，「切换元素的 display CSS 属性」；
  
• v-if：根据表达式之真假值「渲染或销毁元素」；
  
• v-for：基于一个数组来渲染一个列表。
  

这些指令让我们可以更加声明式地使用 DOM，隐蔽复杂的 DOM 操控逻辑。 除了内置的指令，Vue.js 也答应我们注册自界说指令[2]。自界说指令「答应我们在渲染的 DOM 元素上应用自界说的行为」。
基础使用

以全局自界说指令为例，通过全局方法 app.directive(name, options) 进行注册，并使用 v- 前缀在模板中应用。directive() 方法接收两个参数:

• name：指令名称，如 focus；
  
• options：指令配置对象，其中包罗「指令的钩子函数」。
  

下面以自界说指令 v-focus作为示例先容，起首创建 v-focus指令：

1. const app = createApp({});
2. app.directive("focus", {
3.   // 当绑定元素插入到 DOM 中时......
4.   mounted(el) {
5.     // 聚焦元素
6.     el.focus();
7.   },
8. });

复制代码

然后在模板中使用：

1. <input v-focus />

复制代码

当输入框挂载到 DOM 时，它将自动得到焦点。 一个自界说指令界说对象可以提供以下「钩子函数」：

1. const myDirective = {
2.   // 在绑定元素的 attribute 前
3.   // 或事件监听器应用前调用
4.   created(el, binding, vnode, prevVnode) {
5.     // 下面会介绍各个参数的细节
6.   },
7.   // 在元素被插入到 DOM 前调用
8.   beforeMount(el, binding, vnode, prevVnode) {},
9.   // 在绑定元素的父组件
10.   // 及他自己的所有子节点都挂载完成后调用
11.   mounted(el, binding, vnode, prevVnode) {},
12.   // 绑定元素的父组件更新前调用
13.   beforeUpdate(el, binding, vnode, prevVnode) {},
14.   // 在绑定元素的父组件
15.   // 及他自己的所有子节点都更新后调用
16.   updated(el, binding, vnode, prevVnode) {},
17.   // 绑定元素的父组件卸载前调用
18.   beforeUnmount(el, binding, vnode, prevVnode) {},
19.   // 绑定元素的父组件卸载后调用
20.   unmounted(el, binding, vnode, prevVnode) {},
21. };

复制代码

每个钩子函数的参数包括：

• el：指令绑定到的元素。可以用于直接使用 DOM。
  
• binding：一个对象，包罗value、oldValue、arg、modifiers、instance、dir属性。
  
• vnode：代表绑定元素的底层 VNode。
  
• prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
  

参数的详细先容，可以查察文档《Hook Arguments[3]》。