使用Vue3自定义指令，让你的应用更具交互性

紫陌学前端
406 阅读5分钟

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

1.认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue 也允许我们来自定义自己的指令。

这篇文章主要讲Vue3指令，想看Vue2指令看我另一篇文章，Vue2自定义指令。文章最后有对比vue2和Vue3的指令区别

2.自定义指令使用场景

  1. 自定义指令可用于定义复杂的行为或公用的行为。当你想要在多个组件中重用某个复杂的行为或逻辑时，就可以考虑使用自定义指令。

3.自定义指令分为两种

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；

自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

4.自定义指令基本使用

需求：当某个元素挂载完成后可以自定获取焦点

  1. 局部指令

setup语法 image.png

选项式写法：

image.png

  1. 全局指令

首先在scr目录下创建direactives文件夹，每一个指令独自一个文件，并且导出函数。还有一个index.js文件统一导入所有指令，最后全部导出在main.js统一注册

image.png

这种操作方便管理自定义指令，main.js代码也不会臃肿。

5.指令的生命周期

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

mounted钩子用的多

6.指令的参数和修饰符

指令可以接受一些参数或者修饰符

image.png

我们的生命周期中，我们可以通过 bindings 获取到对应的内容：binding是一个一个对象

image.png

7.封装日期自定义指令

在开发中，大多数情况下从服务器获取到的都是时间戳；我们需要将时间戳转换成具体格式化的时间来展示,现在封装一个日期的只定义指令，可以综合练习上面的概念。一般在项目中封装的指令基本都是全局指令。所有我就封装一个全局自定义指令。

image.png 效果：

image.png

这个指令百搭的，可以直接拿到项目中使用，也有面试中说自己封装的。使用的时候可以根据自己喜欢的格式传不同的指令参数。

核心代码给大家： `JavaScript

import dayjs from 'dayjs'

export default function directiveFormatTime(app) {
  app.directive("formatTime", {
    mounted(el, bindings) {
      // 1.获取时间, 并且转化成毫秒
      let timestamp = el.textContent
      if (timestamp.length === 10) {
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value
      if (!value) {
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对时间进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

`

使用的时候： `HTML

<template>
  <div class="app">
    <h2 v-formatTime="'YYYY/MM/DD'">{{ timestamp }}</h2>
    <h2 v-formatTime:YYYY-MM-DD>{{ 1551111166666 }}</h2>
  </div>
</template>

<script setup>
    const timestamp = 1231355453
</script>

`

8.Vue2和Vue3的区别

  1. 注册方式不同
  • 在 Vue 2 中，可以通过 Vue.directive() 方法或者在组件的 directives 选项中注册自定义指令。
  • 在 Vue 3 中，只能通过 app.directive() 方法或者在组件的 directives 选项中注册自定义指令。其中，app 是创建 Vue 应用时返回的应用实例。
  1. 钩子函数名称不同
    • bind：只会调用一次，指令 第一次 绑定到元素时会调用
    • inserted：被绑定元素插入父节点时调用 。
    • update：元素第一次绑定不会触发，绑定的值发生更新触发，可能发生在其子节点更新之前。
    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind：只调用一次，指令与元素解绑时调用。
  • 在 Vue 3 中，自定义指令可以定义以下几个钩子函数：
    • created：在绑定元素的 attribute 或事件监听器被应用之前调用；
    • beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
    • mounted：在绑定元素的父组件被挂载后调用；
    • beforeUpdate：在更新包含组件的 VNode 之前调用；
    • updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
    • beforeUnmount：在卸载绑定元素的父组件之前调用；
    • unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；
  1. 钩子函数参数不同

  • 在 Vue 2 中，钩子函数的参数有以下几个：

    • el
    • binding
    • vnode
    • oldVnode

  • 在 Vue 3 中，钩子函数的参数有以下几个：

    • el
    • binding
    • vnode
    • prevVNode
    • nextVNode

其中，prevVNode 和 nextVNode 分别代表前一个和后一个虚拟节点。

  1. 指令函数返回值不同

在 Vue 2 中，自定义指令的钩子函数可以返回以下几种值：

  • undefined
  • Object
  • Function

在 Vue 3 中，自定义指令的钩子函数可以返回以下几种值：

  • void
  • Object
  • Function
  • Promise

最后

如果觉得对你有帮助就点点赞呗~~~

avatar
文章
阅读
粉丝