vue 自定义指令

vue 自定义指令
- 分类
  - 全局指令 Vue.directive()
  - 局部指令 directives
- vue 自定义指令钩子函数
vue3 自定义指令
- 分类
  - 全局指令 app.directive()
  - 局部指令 directives
- vue3 自定义指令钩子函数

vue 自定义指令

除了Vue提供的内置指令之外，你还可以自定义指令来扩展Vue的行为。

自定义指令可以让你 在DOM元素上添加自定义行为或样式，并且可以重复使用这些行为和样式，从而提高代码的复用性。

Vue中自定义指令有两种方式：全局指令和局部指令。

分类

全局指令 Vue.directive()

局部指令 directives

全局指令

全局指令是注册在Vue构造函数上的指令，可以在整个应用程序的任何实例中使用。

你可以使用Vue.directive()方法来创建全局指令，该方法接受两个参数：指令名称 和 指令选项对象 。

例如，下面是一个自定义的v-focus指令，在元素插入到DOM时将焦点设置在该元素上：
```
Vue.directive('focus', {inserted: function (el) {el.focus()}
})
```
然后在模板中可以像下面这样使用v-focus指令：
```
<input v-focus>
```
注意，在全局指令中，指令名称需要以v-开头 。
局部指令

局部指令是在组件中注册的指令，只能在该组件及其子组件中使用。

你可以在组件的选项对象中使用directives属性来注册局部指令。

例如，下面是一个组件的局部指令v-scroll，当用户向下滚动时触发该指令：
```
export default {directives: {scroll: {inserted: function (el, binding) {window.addEventListener('scroll', binding.value)},unbind: function (el, binding) {window.removeEventListener('scroll', binding.value)}}},// ...
}
```
然后在组件的模板中，可以像下面这样使用v-scroll指令：
```
<div v-scroll="handleScroll">
</div>
```
注意，在局部指令中，指令名称不需要以v-开头 。

通过自定义指令，你可以根据具体的需求来扩展Vue的功能。

指令的选项对象可以包含多个生命周期函数，例如inserted、bind、update等，你可以根据需要来选择不同的生命周期函数进行处理。

同时，自定义指令也是Vue插件的一种方式，在开发插件时可以使用自定义指令来增强Vue的功能。

vue 自定义指令钩子函数

在Vue中，自定义指令的选项对象可以包含一些钩子函数，这些钩子函数在指令的不同生命周期阶段被调用。下面是一些常用的钩子函数：

bind：只调用一次，在指令被绑定到元素时调用。可以在这个钩子函数中进行初始的设置、绑定事件监听器等操作。
inserted：在被绑定元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入DOM中）。可以在这个钩子函数中执行元素的插入操作，如设置焦点、添加样式等。
update：在指令所在元素的模板更新时调用，但可能发生在其子元素模板更新之前。比较常见的使用场景是对比指令的绑定值（binding.value）和更新值（binding.oldValue），并根据需要进行相应的操作。
componentUpdated：在指令所在元素的模板及其子元素的模板都更新后调用。可以在这个钩子函数中进行操作，如更新元素状态、调用第三方库的方法等。
unbind：只调用一次，在指令与元素解绑时调用。可以在这个钩子函数中清除绑定的事件监听器、移除样式等。

这些钩子函数可以在自定义指令的选项对象中使用，例如：

Vue.directive('customDirective', {bind: function (el, binding) {// 初始化设置},inserted: function (el, binding) {// 元素插入父节点后的操作},update: function (el, binding) {// 元素模板更新时的操作},componentUpdated: function (el, binding) {// 元素及子元素模板都更新后的操作},unbind: function (el, binding) {// 解绑时的清理操作}
})

在以上的钩子函数中，el参数是指令所绑定的元素，binding参数是一个对象，包含了指令的信息，如value（绑定值）、oldValue（旧的绑定值）、arg（参数）、modifiers（修饰符）等。

通过使用这些钩子函数，你可以在自定义指令的不同生命周期阶段处理相应的逻辑，实现更灵活和强大的指令功能。

vue3 自定义指令

在Vue 3中，自定义指令的方式与Vue 2有所不同。

通过app.directive()方法来创建全局指令，或者在组件的directives选项中注册局部指令。

分类

全局指令 app.directive()

局部指令 directives

下面是Vue 3中自定义指令的示例：

全局指令：

// main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.directive('focus', {mounted(el) {el.focus()}
})app.mount('#app')

然后在模板中使用v-focus指令：

<!-- App.vue -->
<template><input v-focus>
</template>

局部指令：

// MyComponent.vue
export default {directives: {scroll: {mounted(el, binding) {window.addEventListener('scroll', binding.value)},unmounted(el, binding) {window.removeEventListener('scroll', binding.value)}}},// ...
}

然后在组件的模板中，可以像下面这样使用v-scroll指令：

<!-- MyComponent.vue -->
<template><div v-scroll="handleScroll"><!-- ... --></div>
</template>

在Vue 3中，自定义指令的选项对象中只包含两个钩子函数：mounted和unmounted。

mounted钩子函数在指令所在元素被挂载到DOM后调用，而unmounted钩子函数在指令所在元素从DOM中卸载后调用。

除了钩子函数外，指令对象还可以使用其他的配置项，如beforeMount、updated、beforeUnmount等。

但这些配置项在Vue 3中被视为高级选项，并且不建议频繁使用。

通过自定义指令，你可以在Vue 3中扩展元素的行为和样式，并根据需要执行相应的逻辑。

vue3 自定义指令钩子函数

在Vue 3中，自定义指令可以使用的钩子函数有以下几个：

beforeMount：在指令所在组件挂载之前调用，即在beforeMount生命周期钩子之前调用。
mounted：在指令所在组件挂载到DOM后调用，即在mounted生命周期钩子之后调用。
beforeUpdate：在指令所在组件更新之前调用，即在beforeUpdate生命周期钩子之前调用。
updated：在指令所在组件更新之后调用，即在updated生命周期钩子之后调用。
beforeUnmount：在指令所在组件卸载之前调用，即在beforeUnmount生命周期钩子之前调用。
unmounted：在指令所在组件卸载之后调用，即在unmounted生命周期钩子之后调用。

这些钩子函数可以在自定义指令的选项对象中使用，例如：

import { createApp } from 'vue'const app = createApp()app.directive('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) {// 指令被解绑之后的操作}
})app.mount('#app')