（详解）Vue3自定义指令

素颜马尾好姑娘i 2023-10-12 09:11 9阅读 0赞

**目录**

一、背景

二、提前预习（必看）

2.1自定义指令生命周期

2.2 生命周期四个参数

三、 自定义指令

3.1私有自定义指令

3.1.1定义指令

3.1.2使用自定义指令

3.2全局自定义指令

3.2.1定义指令

3.2.2使用自定义指令

--------------------

## 一、背景 ##

> 在我们日常开发中，会遇到特殊的操作例如，图片懒加载，和类似v-model等等这样的自定义指令

## 二、提前预习（必看） ##

> 自定义指令**跟组件一样，也是有生命周期的**，我们的**操作都是定义在对应的生命周期中**，然后进行操作的，然后**通过钩子函数传参进行绑定事件等等（先了解下）**

### 2.1自定义指令生命周期 ###

*  created：在绑定元素的 attribute 或事件监听器被应用之前调用；
 *  beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
 *  mounted：在绑定元素的父组件被挂载后调用，**大部分自定义指令都写在这里**；
 *  beforeUpdate：在更新包含组件的 VNode 之前调用；
 *  updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
 *  beforeUnmount：在卸载绑定元素的父组件之前调用；
 *  unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

### 2.2 生命周期四个参数 ###

这里七个钩子函数，钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：

*  el：指令所绑定的元素，可以用来直接操作 DOM（**可以进行事件绑定**）。
 *  binding：我们通过自定义指令传递的各种参数
 *  vnode：Vue 编译生成的虚拟节点。
 *  oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

## 三、 自定义指令 ##

### 3.1私有自定义指令 ###

#### 3.1.1定义指令 ####

在每个 vue 组件中，可以在 [directives][] 节点下声明私有自定义指令。示例代码如下：

#### 3.1.2使用自定义指令 ####

在使用自定义指令时，需要加上 v- 前缀。示例代码如下：

<input v-focus/>

### 3.2全局自定义指令 ###

#### 3.2.1定义指令 ####

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明，示例代码如下：

import { createApp } from 'vue'
    
    const app = createApp({
      /* ... */
    })
    
    // 注册（对象形式的指令）
    app.directive('my-directive', {
      /* 自定义指令钩子 */
        mounted(el, bindings) {
          
        }
    
    })
    
    // 注册（函数形式的指令）
    app.directive('my-directive', (el, binding, vnode) => {
            //el是对应的dom，可以通过el给对应添加事件监听 el.addEventListener
            // binding.value 就是通过 = 绑定的值，在传值的时候传到这 binding.value
            //vnode是节点
            })

#### 3.2.2使用自定义指令 ####

在使用自定义指令时，需要加上 v- 前缀。示例代码如下：

<input v-focus/>

[directives]: https://so.csdn.net/so/search?q=directives&spm=1001.2101.3001.7020