vue3的自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom
Directives)。

1.自定义指令的目的和简单介绍

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
举例: 在某个场景下,需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。

局部的写法:

javascript 复制代码
<script setup>
const vFocus = {
  created(el, binding, vnode) {
  },
  beforeMount(el, binding, vnode) {
  },
  mounted(el) {
    el.focus()
  },
  beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有!
  },
  updated() {},
  beforeUnmount() {
    // 当指令绑定的元素 的父组件销毁前调用。  <简单讲,指令元素的父组件销毁前调用>
  },
  unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
}
</script>

<template>
  <input v-focus>
</template>

全局的写法:

javascript 复制代码
import { createApp } from 'vue'
const app = createApp(App)
app.directive('focus',{
  created(el, binding, vnode) {
  },
  beforeMount(el, binding, vnode) {
  },
  mounted() {
  	el.focus()
  },
  beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有!
  },
  updated() {},
  beforeUnmount() {
    // 当指令绑定的元素 的父组件销毁前调用。  <简单讲,指令元素的父组件销毁前调用>
  },
  unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
})

使用全局注册需注意得写在mount('#app')之前,否则会报错

我门可以发现对比vue2来看vue3里自定义指令似乎在生命周期这块发生了某些变化,下面我们来看看具体的。

注意:后面的示例都用局部的自定义指令来讲解。

2.对比vue2自定义指令的生命周期

vue2自定义指令生命周期

bind: function () {},

inserted: function () {},

update: function () {},

componentUpdated: function () {},

unbind: function () {}

3.vue3自定义组件生命周期

created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on

事件监听器调用前的事件监听器中时,这很有用。

beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted:在绑定元素的父组件被挂载后调用。

beforeUpdate:在更新包含组件的 VNode 之前调用。

updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount:在卸载绑定元素的父组件之前调用

unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

这些生命周期都会接受以下几个参数:

el, binding, vnode, prevVnode

相关推荐
羊羊小栈5 分钟前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
Swift社区5 分钟前
为什么 socket.io 客户端在浏览器能连上,但在 Node.js 中报错 transport close?
javascript·node.js
恋猫de小郭18 分钟前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby19 分钟前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴24 分钟前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
huabuyu28 分钟前
在 Taro 小程序中实现完整 Markdown 渲染器的实践
前端
Running_slave30 分钟前
位运算左移右移应该怎么玩?
前端·javascript·算法
晚星star31 分钟前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu31 分钟前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴31 分钟前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript