Vue | Vue中的自定义指令详解

  

第1部分：引言

在Vue.js中，自定义指令提供了一种非常灵活的方式来扩展Vue的功能。它们允许开发者直接对DOM进行操作，响应数据变化，甚至与其他组件或库集成。

第2部分：Vue自定义指令概述

2.1 什么是Vue自定义指令

Vue自定义指令提供了一种强大的方法来扩展Vue的功能。它们允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。

2.2 自定义指令与内置指令的比较

Vue提供了一些内置指令，如v-model、v-if、v-for等，它们已经覆盖了很多常见的场景。然而，内置指令的功能是有限的，自定义指令则提供了更多的灵活性和控制力。以下是一些自定义指令可能用到的场景：

• 动画和过渡：实现复杂的动画效果。
• DOM操作：在不使用额外库的情况下，直接操作DOM。
• 表单验证：创建自定义的表单验证逻辑。
• 交互增强：如拖拽、点击反馈等。

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

2.3.1 Vue2 版本中自定义指令的钩子函数(目前已被摒弃)

Vue自定义指令有以下几个钩子函数，它们在指令的不同阶段被调用：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入到父组件时调用(仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated：指令所在组件的 VNode 及其子组件的 VNode 全部更新后调用。即组件与子组件更新时调用。
• unbind：只调用一次，指令与元素解绑时调用。

注意：

1. 除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数
2. 在每个函数中，第一个参数永远是 el， 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道
3. binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4. oldVnode 只有在 update 与 componentUpdated 钩子中生效
5. 除了 el 之外，binding、vnode 属性都是只读的

钩子函数说白了也就是生命周期，即当一个指令绑定到一个元素上时，这个指令内部有5个生命周期事件函数。

下面是一个简单的 Vue 自定义指令的例子：

Vue.directive('my-directive', {
  // 当绑定元素挂载到 DOM 上时调用
  bind(el, binding, vnode, oldVnode) {
    // 在这里可以进行DOM操作
    console.log('Directive bound!');
  },
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  inserted(el, binding, vnode, oldVnode) {
    console.log('Element inserted!');
  },
  // 指令所在组件的 VNode 更新时调用
  update(el, binding, vnode, oldVnode) {
    console.log('Directive updated!');
  },
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated(el, binding, vnode, oldVnode) {
    console.log('Component updated!');
  },
  // 指令与元素解绑时调用
  unbind(el, binding, vnode, oldVnode) {
    console.log('Directive unbound!');
  }
});

在组件中使用这个自定义指令：

<div v-my-directive="someValue"></div>

当组件被渲染或更新时，这些钩子函数会按预期执行。

2.3.2 Vue3 版本中自定义指令的钩子函数。

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode) {}
}

小结：Vue 3 中的自定义指令钩子函数主要包括：

1. created：在绑定元素的 attribute 前 或 事件监听器应用前调用
2. beforeMount：在元素第一次挂载到 DOM 之前调用。
3. mounted：在元素挂载到 DOM 之后调用。
4. beforeUpdate：在元素或组件的 props 更新之前调用。
5. updated：在元素或组件的 props 更新之后调用。
6. beforeUnmount：在元素或组件卸载之前调用。
7. unmounted：在元素或组件卸载之后调用。

下面是一个自定义指令的示例，它使用了这些钩子函数：

const customDirective = {
  beforeMount(el, binding, vnode) {
    // 挂载前的处理逻辑
  },
  mounted(el, binding, vnode) {
    // 挂载后的处理逻辑
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // 更新前的处理逻辑
  },
  updated(el, binding, vnode, prevVnode) {
    // 更新后的处理逻辑
  },
  beforeUnmount(el, binding, vnode) {
    // 卸载前的处理逻辑
  },
  unmounted(el, binding, vnode) {
    // 卸载后的处理逻辑
  }
};
 
export default customDirective;

在 Vue 应用中使用这个自定义指令：

import { createApp } from 'vue';
import customDirective from './customDirective';
 
const app = createApp(App);
 
// 注册自定义指令
app.directive('custom', customDirective);
 
// 在模板中使用自定义指令
<div v-custom="someValue"></div>

参考：Vue 2 和 Vue 3 自定义指令钩子函数的区别_烤地瓜CSDN博客

2.4 钩子函数的参数

每个钩子函数都接收以下参数：

• el：指令绑定到的元素（类型为 HTMLElement）。这可以用于直接操作 DOM。

• binding：一个对象，（包含了指令的详细信息）包含以下属性。
  
  - name：指令名，不包括v-前缀。
  
  - value：传递给指令的值。即指令的绑定值，可以是任何类型。例如在 v-my-directive="1 + 1" 中，值是 2。
  
  - oldValue：之前的值，即指令绑定的前一个值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
  
  - expression：绑定的表达式。
  
  - arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"
  
  - modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
  
  - instance：使用该指令的组件实例。 即绑定到元素的组件实例。
  
  - dir：指令的定义对象。在 directive 选项中。

• vnode：代表绑定元素的底层 VNode，即虚拟DOM节点。即虚拟节点，包含了关于正在渲染的节点信息。

• prevVnode：代表之前的渲染中指令所绑定元素的 VNode，即前一个虚拟节点。仅在 beforeUpdate 和 updated 钩子中可用。

下面是一个自定义指令的例子：

const customDirective = {
  beforeMount(el, binding, vnode) {
    // 挂载前
  },
  mounted(el, binding, vnode) {
    // 挂载后
  },
  beforeUpdate(el, binding, vnode, prevNode) {
    // 更新前
  },
  updated(el, binding, vnode, prevNode) {
    // 更新后
  },
  beforeUnmount(el, binding, vnode) {
    // 卸载前
  },
  unmounted(el, binding, vnode) {
    // 卸载后
  }
};
 
// 注册全局自定义指令
app.directive('my-directive', customDirective);

在这个例子中，customDirective 对象定义了所有可用的钩子函数，并展示了它们的基本用法。这些函数会在指令绑定到的元素生命周期的不同阶段被调用。 

参考：Vue 2 和 Vue 3 自定义指令钩子函数参数的区别_烤地瓜CSDN博客 

2.5 示例：创建一个简单的自定义指令

下面是一个简单的自定义指令示例，用于在元素上添加点击时的动画效果：

// 注册一个全局自定义指令 `v-click-animate` 
Vue.directive('click-animate', {
  bind(el, binding) {
    // 定义点击时的动画效果
    el.animateClick = () => {
      el.classList.add('click');
      setTimeout(() => {
        el.classList.remove('click');
      }, 100);
    };
  },
  handleEvent(event) {
    if (event.type === 'click') {
      el.animateClick();
    }
  }
});

然后在模板中使用：

<button v-click-animate>Click me!</button>

2.6 示例：动态指令参数

自定义指令还可以接受动态参数，这允许你根据不同的情况应用不同的行为：

Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted(el, binding) {
    // 聚焦元素
    if (binding.value) {
      el.focus();
    }
  }
});

在模板中使用：

<input v-focus="true">

2.7 示例：响应式指令参数

自定义指令的参数也可以是响应式的，这意味着当参数的值变化时，指令的行为也会相应变化：

Vue.directive('my-directive', {
  bind(el, binding) {
    el.textContent = binding.value;
  },
  update(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.textContent = binding.value;
    }
  }
});

在模板中使用：

<div v-my-directive="dynamicValue"></div>

第3部分：创建第一个自定义指令

3.1 理解自定义指令的基础

在深入创建自定义指令之前，我们需要理解自定义指令的基本概念。自定义指令允许你直接对元素进行操作，并且可以响应Vue的数据变化。

3.2 步骤一：定义指令

创建自定义指令的第一步是在Vue实例中定义它。你可以通过Vue.directive()方法定义一个全局指令，或者在组件中使用directives选项定义局部指令。

// 定义一个全局自定义指令 'v-focus'
Vue.directive('v-focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

3.3 步骤二：使用指令

在你的Vue模板中，你可以直接使用这个指令。

<input v-focus>

这个指令会在元素插入DOM时自动聚焦。

3.4 示例：响应式指令

自定义指令可以是响应式的，这意味着它们可以响应数据的变化。

Vue.directive('color-change', {
  bind(el, binding) {
    el.style.color = binding.value;
  },
  update(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.style.color = binding.value;
    }
  }
});

在模板中使用：

<div v-color-change="'red'">This text will be red.</div>

3.5 示例：带参数的指令

自定义指令可以接受参数，这允许你为指令提供更多的灵活性。

Vue.directive('highlight', {
  bind(el, binding) {
    el.style.backgroundColor = binding.arg;
  }
});

在模板中使用：

<div v-highlight:yellow>Highlight me yellow!</div>

3.6 示例：使用修饰符

自定义指令可以与修饰符一起使用，以提供额外的行为。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', binding.modifiers.disabled ? false : true);
  }
});

在模板中使用：

<div v-drag.disabled>Drag me if you can!</div>

3.7 示例：指令的组合使用

自定义指令可以组合使用，以实现更复杂的功能。

Vue.directive('shake', {
  bind(el) {
    el.style.position = 'relative';
  },
  handleEvent(event) {
    if (event.type === 'click') {
      this.animateShake(el);
    }
  },
  animateShake(el) {
    // 定义动画逻辑
  }
});

Vue.directive('repeat-click', {
  bind(el, binding) {
    let clickCount = 0;
    const maxCount = binding.value || 3;

    el.addEventListener('click', () => {
      clickCount++;
      if (clickCount === maxCount) {
        // 执行某些操作
      }
    });
  }
});

在模板中使用：

<div v-shake v-repeat-click="3">Click me three times!</div>

3.8 示例：指令的解绑

自定义指令的unbind钩子可以用来清理你绑定到元素上的任何事件监听器或其他资源。

Vue.directive('infinite-scroll', {
  bind(el, binding) {
    const scrollHandler = () => {
      // 滚动到底部时执行的操作
    };
    el.addEventListener('scroll', scrollHandler);
  },
  unbind(el) {
    el.removeEventListener('scroll', scrollHandler);
  }
});

在模板中使用：

<div v-infinite-scroll>
    <!-- 滚动内容 -->
</div>

3.9 综合示例：创建一个自定义指令来实现输入框的自动完成功能

这个示例展示了如何创建一个更复杂的自定义指令，它将监听用户的输入，并提供自动完成的建议。

Vue.directive('auto-complete', {
  bind(el, binding) {
    const data = binding.value;
    el.addEventListener('input', (e) => {
      const inputValue = e.target.value;
      // 根据输入值提供建议
    });
  }
});

在模板中使用：

<input v-auto-complete="suggestions" placeholder="Type to search...">

第4部分：深入自定义指令

4.1 指令的深入理解

自定义指令提供了一种强大的方式来扩展Vue的功能。在这一节中，我们将深入探讨自定义指令的高级用法，包括如何访问组件实例、如何与组件的生命周期同步，以及如何实现复杂的逻辑。

4.2 访问组件实例

自定义指令可以通过钩子函数的参数访问组件实例，这允许指令与组件的内部状态和方法交互。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    const componentInstance = vnode.context;
    // 使用组件实例的方法或数据
  }
});

4.3 与组件生命周期同步

自定义指令可以通过监听组件的生命周期钩子来同步自己的行为。

Vue.directive('my-directive', {
  inserted(el, binding, vnode) {
    vnode.context.$on('hook:beforeDestroy', () => {
      // 组件销毁前执行的操作
    });
  }
});

4.4 示例：动态类名绑定

创建一个指令，根据组件的状态动态添加或移除类名。

Vue.directive('class-toggle', {
  bind(el, binding) {
    if (binding.value) {
      el.classList.add(...binding.arg);
    }
  },
  componentUpdated(el, binding) {
    if (binding.value) {
      el.classList.add(...binding.arg);
    } else {
      el.classList.remove(...binding.arg);
    }
  }
});

在模板中使用：

<div v-class-toggle="isActive: 'active-class'">Toggle class based on isActive</div>

4.5 示例：自定义指令的依赖注入

自定义指令可以使用inject选项来声明依赖，Vue会自动解析并注入这些依赖。

Vue.directive('my-directive', {
  inject: ['someDependency'],
  bind(el, binding, vnode) {
    // 使用注入的依赖
  }
});

4.6 示例：指令的异步操作

自定义指令可以执行异步操作，并在操作完成后更新DOM。

Vue.directive('fetch-data', {
  bind(el, binding) {
    fetchData(binding.value).then(data => {
      el.textContent = data;
    });
  }
});

在模板中使用：

<div v-fetch-data="apiUrl">Fetching data...</div>

4.7 示例：指令的vnode操作

自定义指令可以操作vnode，以实现更复杂的DOM操作。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // vnode是当前组件的虚拟DOM节点
    const child = vnode.elm.children[0];
    // 对child进行操作
  }
});

4.8 示例：指令与组件的通信

自定义指令可以作为组件之间的通信桥梁。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$emit('custom-event', binding.value);
  }
});

在父组件中使用：

<child-component v-my-directive="dataToPass"></child-component>

4.9 示例：指令的错误处理

自定义指令应该能够处理错误，并在发生错误时提供反馈。

Vue.directive('my-directive', {
  bind(el, binding) {
    try {
      // 尝试执行的操作
    } catch (e) {
      console.error('An error occurred:', e);
    }
  }
});

4.10 示例：指令的性能优化

自定义指令可以通过避免不必要的DOM操作来优化性能。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.__skip = true; // 标记元素以跳过某些操作
  },
  update(el, binding) {
    if (!el.__skip) {
      // 执行更新操作
    }
  },
  unbind(el) {
    delete el.__skip; // 清理标记
  }
});

4.11 示例：指令的组件作用域样式

自定义指令可以应用组件作用域的样式。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$nextTick(() => {
      const style = document.createElement('style');
      style.textContent = `.${binding.arg} { /* 样式规则 */ }`;
      document.head.appendChild(style);
    });
  }
});

在模板中使用：

<div v-my-directive="'unique-class-name'">Styled content</div>

4.12 综合示例：创建一个自定义指令来实现拖拽功能

这个示例展示了如何创建一个复杂的自定义指令，它允许用户拖拽DOM元素。

Vue.directive('draggable', {
  bind(el, binding) {
    let currentX, currentY, initialX, initialY, xOffset, yOffset;

    const mouseDownHandler = (e) => {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
      currentX = initialX;
      currentY = initialY;
      el.classList.add('dragging');
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = (e) => {
      e.preventDefault();
      xOffset = currentX - e.clientX;
      yOffset = currentY - e.clientY;
      currentX = e.clientX - xOffset;
      currentY = e.clientY - yOffset;
      el.style.top = currentY + 'px';
      el.style.left = currentX + 'px';
    };

    const mouseUpHandler = () => {
      el.classList.remove('dragging');
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    el.addEventListener('mousedown', mouseDownHandler);
  },
  unbind(el) {
    el.removeEventListener('mousedown', mouseDownHandler);
  }
});

在模板中使用：

<div v-draggable style="position: absolute;">Drag me</div>

第5部分：高级技巧

5.1 指令的高级应用场景

自定义指令不仅限于简单的DOM操作，它们可以用于实现复杂的交互和动画，甚至可以与第三方库集成，以提供额外的功能。

5.2 示例：集成第三方动画库

使用自定义指令集成动画库，比如Animate.css，来增强Vue组件的交互性。

Vue.directive('animate', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      el.classList.add('animated', binding.value);
      setTimeout(() => {
        el.classList.remove('animated', binding.value);
      }, 1000);
    });
  }
});

在模板中使用：

<button v-animate="'bounce'">Click me for bounce animation!</button>

5.3 示例：指令的依赖注入

自定义指令可以通过inject选项来注入Vue实例的属性或方法，实现依赖注入。

Vue.directive('my-directive', {
  inject: ['someComponentMethod'],
  bind(el, binding) {
    this.someComponentMethod();
  }
});

5.4 示例：指令的动态绑定

自定义指令可以响应动态绑定的变化，实现更复杂的逻辑。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.textContent = `Initial value: ${binding.value}`;
  },
  componentUpdated(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.textContent = `Updated value: ${binding.value}`;
    }
  }
});

在模板中使用：

<div v-my-directive="dynamicValue">Dynamic content</div>

5.5 示例：指令的异步更新

自定义指令可以执行异步操作，并在操作完成后更新元素。

Vue.directive('my-directive', {
  bind(el, binding) {
    fetchData(binding.value).then(data => {
      el.textContent = data;
    });
  }
});

5.6 示例：指令的DOM事件监听

自定义指令可以添加事件监听器，并在适当的时候进行处理。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.addEventListener('mouseenter', () => {
      // 处理鼠标进入事件
    });
  },
  unbind(el) {
    el.removeEventListener('mouseenter', /* 事件处理函数 */);
  }
});

5.7 示例：指令的CSS变量应用

自定义指令可以设置CSS变量，以实现动态样式。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.style.setProperty('--my-color', binding.value);
  }
});

在模板中使用：

<div v-my-directive="'#ff0000'" style="--color: var(--my-color);">Styled with CSS variable</div>

5.8 示例：指令的组件通信

自定义指令可以作为父子组件或兄弟组件之间的通信桥梁。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$emit('custom-event', binding.value);
  }
});

5.9 示例：指令的滚动监听

自定义指令可以监听滚动事件，并在滚动到特定位置时执行操作。

Vue.directive('scroll-to', {
  bind(el, binding) {
    window.addEventListener('scroll', () => {
      if (window.scrollY >= el.offsetTop) {
        el.classList.add('highlight');
      }
    });
  }
});

在模板中使用：

<div v-scroll-to style="height: 500px;">Scroll to highlight me</div>

5.10 示例：指令的触摸事件支持

自定义指令可以添加对触摸事件的支持，以改善移动设备上的用户体验。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.addEventListener('touchstart', () => {
      // 处理触摸开始事件
    });
  }
});

5.11 示例：指令的性能优化

自定义指令可以通过避免不必要的计算和DOM操作来优化性能。

Vue.directive('my-directive', {
  bind(el, binding) {
    const update = () => {
      // 执行更新操作
    };
    requestAnimationFrame(update);
  },
  unbind(el) {
    // 清理工作
  }
});

5.12 综合示例：创建一个自定义指令来实现复杂的表单验证

这个示例展示了如何创建一个复杂的自定义指令，它实现了表单字段的实时验证，并提供视觉反馈。

Vue.directive('form-validate', {
  bind(el, binding) {
    el.addEventListener('input', () => {
      const isValid = validateField(el.value, binding.value);
      el.classList.toggle('invalid', !isValid);
    });
  }
});

在模板中使用：

<input v-form-validate="ruleSet" placeholder="Enter valid data">

参考资料：

Vue.js官网：自定义指令-介绍、指令钩子、钩子函数、简化形式、对象字面量

—— 一篇带你搞懂Vue中的自定义指令_儒雅的烤地瓜的CSDN博客 ——

提升Vue技能：分享8个超实用的自定义指令_vue 自定义指令注册-CSDN博客

详解Vue如何使用自定义指令_vue.js_脚本之家 | Vue自定义指令学习及应用详解_vue.js_脚本之家

Vue中的自定义指令_博客园 | Vue指令及自定义指令的使用_博客园 | Vue自动义指令_博客园