Vue3 自定义指令的原理,以及应用
文章目录
- 前言
- 一、原理说明
- 二、注册与使用
- 1. 全局注册
- 2. 局部注册
- 3. 使用方式
- 三、典型应用场景
- 四、案例:权限控制指令
- 五、注意事项
- v-draggable
- ✅ 目标效果:
- 🧩 1. 自定义指令定义
- 🧱 2. 在项目中注册
- 🧪 3. 使用示例
- 📝 说明:
- ✅ 自定义指令的底层实现原理概览
- 📦 相关核心函数 & 文件位置(Vue 3)
- 🧩 源码分析:流程详解
- ① 编译模板为虚拟节点时
- ② `withDirectives()` 函数
- ③ `mountElement()` 阶段:执行 mounted 钩子
- ④ `invokeDirectiveHook()` 执行钩子
- 🧠 自定义指令对象结构(本质)
- ✅ 总结:Vue 3 自定义指令运行机制
前言
Vue 3 自定义指令(Custom Directives)是对 DOM 元素的底层操作进行封装的一种机制,适用于处理组件模板中难以通过普通属性或事件完成的逻辑,例如拖拽、自动聚焦、懒加载、权限控制等场景。
一、原理说明
Vue 3 中,自定义指令是通过组合式 API directive
函数注册的,本质上是对某个 DOM 元素生命周期钩子的扩展封装。底层由 Directive
对象描述,具备以下钩子函数:
const myDirective = {created(el, binding, vnode, prevVnode) {}, // 元素创建后调用beforeMount(el, binding, vnode, prevVnode) {},// 挂载前mounted(el, binding, vnode, prevVnode) {}, // 挂载后beforeUpdate(el, binding, vnode, prevVnode) {},updated(el, binding, vnode, prevVnode) {},beforeUnmount(el, binding, vnode, prevVnode) {},unmounted(el, binding, vnode, prevVnode) {}
}
el
: 被绑定的 DOM 元素binding
: 包含传递给指令的值、修饰符等vnode
: 虚拟节点prevVnode
: 之前的虚拟节点
二、注册与使用
1. 全局注册
const app = createApp(App)app.directive('focus', {mounted(el) {el.focus()}
})
2. 局部注册
export default {directives: {focus: {mounted(el) {el.focus()}}}
}
3. 使用方式
<input v-focus />
三、典型应用场景
场景 | 描述 |
---|---|
自动聚焦 | 页面加载后 input 自动聚焦 |
拖拽指令 | 实现元素的拖动行为 |
权限控制 | 根据权限隐藏/禁用某些 DOM 元素 |
懒加载 | 图片进入可视区域再加载 |
节流防抖 | 限制用户频繁点击按钮的行为 |
动态样式绑定 | 更底层地控制样式/类名,比如动画、transition 控制 |
四、案例:权限控制指令
app.directive('permission', {mounted(el, binding) {const userPermissions = ['read']if (!userPermissions.includes(binding.value)) {el.parentNode?.removeChild(el)}}
})
<button v-permission="'admin'">仅管理员可见</button>
五、注意事项
- 组件首选:大部分逻辑推荐使用组件封装,只有在需要直接操作 DOM 的时候才用指令。
- 指令副作用清理:在
unmounted
中做清理(如移除监听器、取消定时器)。 - 性能考虑:不要在
updated
中重复进行复杂操作。
v-draggable
我们以 拖拽指令 v-draggable
为例,讲解一个完整的 Vue 3 自定义指令应用。
✅ 目标效果:
使任意元素可拖动,按住鼠标左键拖动到任意位置。
🧩 1. 自定义指令定义
// directives/draggable.ts
import type { Directive } from 'vue'const draggable: Directive = {mounted(el) {el.style.position = 'absolute'el.style.cursor = 'move'let offsetX = 0let offsetY = 0const parent = el.offsetParent || document.bodyconst parentRect = parent.getBoundingClientRect()const onMouseDown = (e: MouseEvent) => {offsetX = e.clientX - el.offsetLeftoffsetY = e.clientY - el.offsetTopdocument.addEventListener('mousemove', onMouseMove)document.addEventListener('mouseup', onMouseUp)}const onMouseMove = (e: MouseEvent) => {let left = e.clientX - offsetXlet top = e.clientY - offsetY// ✅ 限制在父容器内const maxLeft = parent.clientWidth - el.offsetWidthconst maxTop = parent.clientHeight - el.offsetHeightleft = Math.max(0, Math.min(left, maxLeft))top = Math.max(0, Math.min(top, maxTop))el.style.left = `${left}px`el.style.top = `${top}px`}const onMouseUp = () => {// ✅ 自动吸附到左右边缘const left = el.offsetLeftconst center = parent.clientWidth / 2el.style.left = left < center ? '0px' : `${parent.clientWidth - el.offsetWidth}px`document.removeEventListener('mousemove', onMouseMove)document.removeEventListener('mouseup', onMouseUp)}el.addEventListener('mousedown', onMouseDown);(el as any)._onMouseDown = onMouseDown},unmounted(el) {el.removeEventListener('mousedown', (el as any)._onMouseDown)}
}export default draggable
🧱 2. 在项目中注册
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import draggable from './directives/draggable'const app = createApp(App)
app.directive('draggable', draggable)
app.mount('#app')
🧪 3. 使用示例
<!-- App.vue -->
<template><divv-draggablestyle="width: 100px; height: 100px; background: #42b983;">拖我</div>
</template>
📝 说明:
el.style.position = 'absolute'
:让元素能够移动- 鼠标按下时,记录初始偏移;
- 鼠标移动时更新
left/top
; - 鼠标松开时清除事件监听,避免内存泄漏。
功能 | 实现方式 |
---|---|
拖动 | mousedown + mousemove + mouseup |
边界限制 | 利用 parent.clientWidth /clientHeight 计算边界 |
自动吸附左右 | 释放鼠标后判断是否靠近左/右边,设置 left 值 |
Vue 3 中自定义指令的源码实现,核心位于其 runtime-core 模块,具体流程在组件渲染和更新阶段处理指令钩子(created
、mounted
、updated
等)。我们来深入讲解其源码执行机制。
✅ 自定义指令的底层实现原理概览
自定义指令在 Vue 编译和渲染过程中分两阶段处理:
-
编译阶段(仅在模板编译时):
- 将
v-xxx
语法解析为withDirectives()
包裹的 VNode。
- 将
-
运行时渲染阶段:
- 调用
withDirectives()
,将指令对象和绑定信息附加到 vnode。 - 在
mountElement
和patchElement
时,调用各个指令生命周期钩子。
- 调用
📦 相关核心函数 & 文件位置(Vue 3)
功能 | 函数名 | 文件位置 |
---|---|---|
将指令附加到 vnode | withDirectives | runtime-core/directives.ts |
执行指令生命周期钩子 | invokeDirectiveHook | runtime-core/renderer.ts |
调用时机:挂载/更新 | mountElement , patchElement | runtime-core/renderer.ts |
🧩 源码分析:流程详解
① 编译模板为虚拟节点时
模板语法:
<div v-focus="true" />
会被编译为:
withDirectives(h('div'), [[focusDirective, true]
])
② withDirectives()
函数
export function withDirectives(vnode: VNode, directives: DirectiveArguments): VNode {vnode.dirs = directivesreturn vnode
}
这里会把指令数组保存在 vnode 上,供后续 mount 或 patch 时处理。
③ mountElement()
阶段:执行 mounted 钩子
if (dirs) {invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
}
patchProps(...) // 设置属性等if (dirs) {queuePostRenderEffect(() => {invokeDirectiveHook(vnode, null, parentComponent, 'mounted')}, parentSuspense)
}
④ invokeDirectiveHook()
执行钩子
function invokeDirectiveHook(vnode: VNode,prevVNode: VNode | null,instance: ComponentInternalInstance,name: DirectiveHookName
) {const dirs = vnode.dirs!for (let i = 0; i < dirs.length; i++) {const dir = dirs[i]const hook = dir[0][name]if (hook) {callWithAsyncErrorHandling(hook,instance,ErrorCodes.DIRECTIVE_HOOK,[vnode.el,dir[1], // binding.valuevnode,prevVNode])}}
}
👆这个函数就是最终 真正调用你写的 mounted()
、updated()
等函数 的地方。
🧠 自定义指令对象结构(本质)
你注册的指令最终是以下结构:
[directive: {mounted,updated,...},value, // binding.valuearg, // binding.argmodifiers, // binding.modifiersinstance // component instance
]
✅ 总结:Vue 3 自定义指令运行机制
阶段 | 关键点 |
---|---|
编译阶段 | v-xxx 被转成 withDirectives() 包装 |
渲染阶段 | vnode.dirs 被附加到 VNode |
挂载时 | invokeDirectiveHook(..., 'mounted') 被调用 |
更新时 | invokeDirectiveHook(..., 'updated') 被调用 |
模板编译:
Vue 编译 v-xxx 为 withDirectives(h(…), [directive]) 结构。
withDirectives:
将指令数组 dirs 附加到虚拟节点 vnode 上,供后续处理。
mountElement:
创建 DOM 元素时,如果发现 vnode.dirs 存在,就调度钩子(如 mounted)。
invokeDirectiveHook:
遍历所有绑定指令,调用你注册的生命周期函数(如 mounted()、updated())。
执行你写的钩子函数:
如 el.focus()、拖拽逻辑等,操作真实 DOM。
相关文章:
Vue3 自定义指令的原理,以及应用
文章目录 前言一、原理说明二、注册与使用1. 全局注册2. 局部注册3. 使用方式 三、典型应用场景四、案例:权限控制指令五、注意事项 v-draggable✅ 目标效果:🧩 1. 自定义指令定义🧱 2. 在项目中注册🧪 3. 使用示例&am…...
306.检查是否所有A都在B之前
2124. 检查是否所有 A 都在 B 之前 - 力扣(LeetCode) class Solution {public boolean checkString(String s) {return !s.contains("ba");} } class Solution(object):def checkString(self, s):return s.find("ba")-1...
适合java程序员的Kafka消息中间件实战
创作的初心: 我们在学习kafka时,都是基于大数据的开发而进行的讲解,这篇文章为java程序员为核心,助力大家掌握kafka实现。 什么是kafka: 历史: 诞生与开源(2010 - 2011 年) 2010 年…...
当体育数据API遇上WebSocket:一场技术互补的「攻防战」
在世界杯决赛的最后一分钟,你正通过手机观看直播。突然,解说员大喊“球进了!”,但你的屏幕却卡在对方半场的回放画面——这种「延迟乌龙」的尴尬,正是实时体育应用面临的终极挑战。 在体育数字化浪潮下,用…...
1:点云处理—三种显示方法(自建点云)
1.彩色显示 *读取三维点云 dev_get_window(WindowHandle)dev_open_window(0, 0, 512, 512, black, WindowHandle1) read_object_model_3d(./19-12-26/t.ply, m, [], [], ObjectModel3D, Status)Instructions[0] : Rotate: Left button Instructions[1] : Zoom: Shift left…...
SCADA|KingSCADA运行报错:加载实时库服务失败
哈喽,你好啊,我是雷工! 最近在绵阳出差,在现场调试时遇到报错问题,翻了下以往记录没有该错误的相关笔记。 于是将问题过程及处理办法记录下来。 01 问题描述 昨天还好好的,可以正常运行的程序今天再次运行时报错: “加载 实时库服务 失败” 查看日志中错误信息如下: …...
k8s | Kubernetes 服务暴露:NodePort、Ingress 与 YAML 配置详解
CodingTechWork 引言 在 Kubernetes 集群中,服务暴露是将集群内部的服务对外部网络提供访问的关键环节。NodePort 和 Ingress 是两种常用的服务暴露方式,它们各有特点和适用场景。本文将详细介绍这两种方式的原理、配置方法以及如何通过 YAML 文件实现服…...
upload-labs靶场通关详解:第一关
一、一句话木马准备 新建一个文本文档,写入php代码,修改文件后缀名为php,保存。 phpinfo() 是 PHP 里的一个内置函数,其功能是输出关于当前 PHP 环境的详细信息。这些信息涵盖 PHP 版本、服务器配置、编译选项、PHP 扩展、环境变…...
SSA-CNN+NSGAII+熵权TOPSIS,附相关气泡图!
目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 经典麻雀搜索算法深度学习多目标优化多属性决策!SSA-CNNNSGAII熵权TOPSIS,附相关气泡图!本文旨在通过优化卷积神经网络(CNN)以及采用NSGAII多目标优化与熵权…...
数据结构之栈与队列
一,栈和队列的区别 1、核心定义与特性 特性栈(Stack)队列(Queue)定义仅允许在栈顶(表尾)进行插入和删除的线性表,遵循 后进先出(LIFO)。允许在队尾插入、队…...
SSHv2 密钥交换(Key Exchange)详解
1. 算法协商 在密钥交换开始前,客户端和服务端会协商确定本次会话使用的算法组合。具体过程如下: 交换算法列表 客户端和服务端各自发送支持的算法列表,包括: 密钥交换算法(如 diffie-hellman-group14-sha256…...
从零开始学习three.js(15):一文详解three.js中的纹理映射UV
1. UV 映射基础概念 1.1 什么是 UV 坐标? 在三维计算机图形学中,UV 坐标是将二维纹理映射到三维模型表面的坐标系统。UV 中的 U 和 V 分别代表2D纹理空间的水平(X)和垂直(Y)坐标轴,与三维空间…...
解锁 Postgres 扩展日!与瀚高共探 C/Java 跨语言扩展技术的边界与未来
2025 年 5 月 13 日至 16 日(蒙特利尔时间),一年一度的 PostgreSQL 开发者大会 PGConf.dev(原 PGCON 会议)将在加拿大蒙特利尔盛大举行。同去年一样,在本次大会开幕的前一天同样会举办另外一个专场活动——…...
【Hive入门】Hive增量数据导入:基于Sqoop的关系型数据库同步方案深度解析
目录 引言 1 增量数据导入概述 1.1 增量同步与全量同步对比 1.2 增量同步技术选型矩阵 2 Sqoop增量导入原理剖析 2.1 Sqoop架构设计 2.2 增量同步核心机制 3 Sqoop增量模式详解 3.1 append模式(基于自增ID) 3.2 lastmodified模式(基…...
✍️【TS类型体操进阶】挑战类型极限,成为类型魔法师!♂️✨
哈喽类型战士们!今天我们要玩转TS类型体操,让你的类型系统像体操运动员一样灵活优雅~ 学会这些绝招,保准你的代码类型稳如老狗!(文末附类型体操段位表)🚀 一、什么是类型体操? &…...
部署Prometheus+Grafana简介、监控及设置告警(一)
部署PrometheusGrafana简介、监控及设置告警 一. 环境准备 服务器类型IP地址组件 Prometheus服务器、agent服务器、Grafana服务器192.168.213.7Prometheus 、node_expprter,Grafanaagent服务器192.168.213.8node_exporter 如果有防火请记得开启9090&am…...
k8s部署OpenELB
k8s部署OpenELB k8s部署OpenELB配置示例: layer2模式 k8s部署OpenELB 部署OpenELB至K8s集群 # k8s部署OpenELB kubectl apply -f https://raw.githubusercontent.com/openelb/openelb/refs/heads/master/deploy/openelb.yaml# 查看openelb的pod状态 kubectl get pods -n open…...
python打卡day18
聚类后的分析:推断簇的类型 知识点回顾: 推断簇含义的2个思路:先选特征和后选特征通过可视化图形借助ai定义簇的含义科研逻辑闭环:通过精度判断特征工程价值 作业:参考示例代码对心脏病数据集采取类似操作,并且评估特征…...
新品发布 | 96MHz主频 M0+内核低功耗单片机CW32L011产品介绍
CW32L011是基于 eflash 的单芯片低功耗微控制器,集成了主频高达 96MHz的 ARMCortex-M0内核、高速嵌入式存储器(多至 64K字节 FLASH 和多至 6K 字节 SRAM)以及一系列全面的增强型外设和 I/O 口。 所有型号都提供全套的通信接口(3路 UART、1路 SPI和1路12C)、12位高速…...
【面试 · 二】JS个别重点整理
目录 数组方法 字符串方法 遍历 es6 构造函数及原型 原型链 this指向 修改 vue事件循环Event Loop FormData 数组方法 改变原数组:push、pop、shift、unshift、sort、splice、reverse不改变原属组:concat、join、map、forEach、filter、slice …...
【详细教程】ROC曲线的计算方式与绘制方法详细介绍
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
【神经网络与深度学习】VAE 在解码前进行重参数化
在 VAE 中,解码之前进行重参数化主要有以下几个重要原因: 可微分性 在深度学习里,模型是通过反向传播算法来学习的,而这需要计算梯度。若直接从潜在变量的分布 (q_{\theta}(z|x))(由编码器输出的均值 (\mu) 和方差 (…...
ai agent(智能体)开发 python3基础11: java 调用python waitfor卡死,导致深入理解操作系统进程模型和IPC机制
java 调用python waitfor 卡死 导致浏览器无法自动关闭,java ,python双发无限等待 根源在于还是没有理解 进程之间标准输入输出到底是什么含义 系统进程与跨语言调用的核心机制 在跨语言调用(如Java调用Python)时,理…...
大模型赋能:2D 写实数字人开启实时交互新时代
在数字化浪潮席卷全球的当下,人工智能技术不断突破创新,其中大模型驱动的 2D 写实数字人正成为实时交互领域的一颗新星,引领着行业变革,为人们带来前所未有的交互体验。 一、2D 写实数字人概述 2D 写实数字人是通过计算机图形学…...
CATIA高效工作指南——零件建模篇(二)
一、PowerCopy特征复用技术 1.1 智能特征封装 通过几何图形集(Geometrical Set)构建参数化特征组,将关联的草图、曲面、实体等元素进行逻辑封装。操作流程如下: 创建新几何图形集并完成特征建模激活PowerCopy命令,选择目标几何集定…...
QT人工智能篇-opencv
第一章 认识opencv 1. 简单概述 OpenCV是一个跨平台的开源的计算机视觉库,主要用于实时图像处理和计算机视觉应用。它提供了丰富的函数和算法,用于图像和视频的采集、处理、分析和显示。OpenCV支持多种编程语言,包括C、Python、Java等&…...
java实现一个操作日志模块功能,怎么设计
为了设计一个高效、可靠且可扩展的操作日志模块,可以结合 AOP(面向切面编程)、异步处理(多线程或MQ)以及合理的存储策略,具体方案如下: 1. 技术选型与架构设计 (1) AOP 实现非侵…...
音频相关基础知识
主要参考: 音频基本概念_音频和音调的关系-CSDN博客 音频相关基础知识(采样率、位深度、通道数、PCM、AAC)_音频2通道和8ch的区别-CSDN博客 概述 声音的本质 声音的本质是波在介质中的传播现象,声波的本质是一种波,是一…...
【Agent】使用 Python 结合 OpenAI 的 API 实现一个支持 Function Call 的程序,修改本机的 txt 文件
使用 Python 结合 OpenAI 的 API 来实现一个支持 Function Call 的程序,修改本机的 txt 文件。需要注意,在运行代码前,要确保已经安装了 openai 库,并且拥有有效的 OpenAI API Key。 import openai import os# 设置你的 OpenAI A…...
mint系统详解详细解释
Linux Mint是一款基于Ubuntu的开源桌面操作系统,以用户友好、稳定性强、功能全面著称,尤其适合从Windows迁移的新手和追求高效办公的用户。以下从技术架构、版本演进、生态体系、核心功能、应用场景等维度进行深度解析: 一、技术架构&#x…...
WordPress个人博客搭建(三):WordPress网站优化
前言 在之前的WordPress个人博客搭建(一)与WordPress个人博客搭建(二)文章中,我们已经在自己的非凡云云服务器上成功搭建了WordPress个人博客。现在让我们继续这场数字世界的耕耘,通过插件与主题的巧妙搭配…...
力扣1812题解
记录 2025.5.7 题目: 思路: 从左下角开始,棋盘的行数和列数(均从 1 开始计数)之和如果为奇数,则为白色格子,如果和为偶数,则为黑色格子。 代码: class Solution {pu…...
深入理解XGBoost(何龙 著)学习笔记(三)
原创 化心为海 微阅读札记https://mp.weixin.qq.com/s/vBE3fu9AZDjRFd5niJU0lg 2025年05月06日 18:17 北京 第三章 机器学习算法基础 摘要:本章首先介绍了基础的机器学习算法的实现原理和应用;然后对决策树模型做了详细介绍;最后࿰…...
一篇文章解析 H.264/AVC 视频编解码标准框架
古人有云: “不积跬步, 无以至千里; 不积小流, 无以成江海。” 本文给小伙伴们删繁就简介绍 H.264/AVC 视频编解码标准框架。 H.264/AVC框架 H.264/AVC 作为视频编码领域的里程碑标准,仍然沿用混合编码框架,但其通过模块化技术创新显著提升了压缩效率和网络适应性。H.264/AV…...
Sat2Density论文详解——卫星-地面图像生成
“Sat2Density: Faithful Density Learning from Satellite-Ground Image Pairs”,即从卫星-地面图像对中学习忠实的密度表示。论文的主要目标是开发一种能够准确表示卫星图像三维几何结构的方法,特别关注从卫星图像中合成具有3D意识的地面视图图像的挑战…...
【计算机架构】RISC(精简指令集计算机)架构
一、引言 在计算机科学技术飞速发展的长河中,计算机架构犹如一艘艘领航的巨轮,不断引领着计算技术朝着更高性能、更低功耗、更智能化的方向前行。RISC(精简指令集计算机)架构便是其中一艘极为独特且极具影响力的“巨轮”。从早期计…...
智算中心基础设施0-1建设全流程及投产后的运维
0 - 1 建设全流程 规划与设计 需求分析:与相关部门和用户沟通,了解智算中心的业务需求,包括计算能力、存储容量、网络带宽、应用场景等,为后续的设计提供依据。选址规划:考虑电力供应、网络接入、环境条件、安全因素等…...
用3D slicer 去掉影像中的干扰体素而还原干净影像(脱敏切脸处理同)
今天遇到一个特殊的影像,扫描被试的头颅被很多干扰阴影快给遮盖住了,3D 建模出来的头颅有很多干扰,非常影响处理和视觉体验,正好解锁一个3D slicer 的功能吧。 背景:有一个被试数据头顶有很多干扰,直接覆盖…...
滚动条样式
title: 滚动条样式 date: 2025-05-07 19:59:31 tags:css 滚动条样式完整定义 HTML 示例 以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件,涵盖了WebKit内核浏览器和Firefox的滚动条定制: <!DOCTYPE html> <html lang"zh-CN&…...
Prompt(提示词)工程师,“跟AI聊天”
提示词工程师这活儿早就不只是“跟AI聊天”那么简单了,特别是现在MetaGPT、LangChain这些框架出来后,整个赛道都升级成“AI指挥官”的较量了。 第一层:基础能力得打牢 AI语言学家的功底 别笑,真得像学外语一样研究大模型。比如GP…...
Java版ERP管理系统源码(springboot+VUE+Uniapp)
ERP系统是企业资源计划(Enterprise Resource Planning)系统的缩写,它是一种集成的软件解决方案,用于协调和管理企业内各种关键业务流程和功能,如财务、供应链、生产、人力资源等。它的目标是帮助企业实现资源的高效利用…...
金融小知识
📉 一、“做空”是啥? 通俗说法:押“它会跌”,赚钱! ✅ 举个例子: 有一天老王的包子涨价到 10 块一个,张三觉得这价格肯定撑不住,未来会跌到 5 块。于是他: 向朋友借了…...
高组装导轨的特点
高组装导轨通常是四列式单圆弧齿形接触直线导轨,具有整合化的结构设计,适用于重负荷和精密应用。与其它直线导轨高组装导轨提升了负荷与刚性能力,具备四方向等负载特色和自动调心功能,能够吸收安装面的装配误差,达到高…...
PE文件结构(导入表)
导入表 什么是导入表? 导入表就是pe文件需要依赖哪些模块以及依赖这些模块中的哪些函数 回想我们导出表的内容,导出表的位置和大小是保存在扩展pe头最后一个结构体数组当中的 IMAGE_DATA_DIRECTORY DataDirectory[IMAGE_NUMBEROF_DIRECTORY_ENTRIES]第…...
AI 实践探索:辅助生成测试用例
背景 目前我们的测试用例主要依赖人工生成和维护,AI时代的来临,我们也在思考“AI如何赋能业务”,提出了如下命题: “探索通过AI辅助生成测试用例,完成从需求到测试用例生成的穿刺”。 目标 找全测试路径辅助生成测…...
2025年链游行业DDoS与CC攻击防御全解析:高带宽时代的攻防博弈
2025年,链游行业在元宇宙与Web3.0技术的推动下迎来爆发式增长,但随之而来的DDoS与CC攻击也愈发猖獗。攻击者瞄准链游的高频交易接口、NFT拍卖系统及区块链节点,通过混合型攻击(如HTTP FloodUDP反射)瘫痪服务࿰…...
LeetCode热题100--73.矩阵置零--中等
1. 题目 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1: 输入:matrix [[1,1,1],[1,0,1],[1,1,1]] 输出:[[1,0,1],[0,0,0],[1,0,1]] 示例 2ÿ…...
51camera将参加第九届沥青路面论坛暨新技术新成果展示会
51camera志强视觉 51camera即将参加第九届沥青路面论坛暨新技术新成果展示会,届时会有相关动态应用展示,欢迎广大客户朋友莅临参观。 会议时间:2025 年5月16日-18日 会议地点:长沙国际会议中心一层多功能厅1-6厅(长…...
python 闭包获取循环数据经典 bug
问题代码 def create_functions():functions []for i in range(3):# 创建一个函数,期望捕获当前循环的i值functions.append(lambda: print(f"My value is: {i}"))return functions# 创建三个函数 f0, f1, f2 create_functions()# 调用这些函数 f0() # 期望输出 &…...
Java的HashMap面试题
目录 1. 说一下HashMap的工作原理?(1.7和1.8都是) 2. 了解的哈希冲突解决方法有哪些 3. JAVA8的 HashMap做了哪些优化 4. HashMap的数组长度必须是 2 的 n 次方 5. HashMap什么时候引发扩容 5.1 数组容量小于64的情况: 5.2…...