第六节:进阶特性高频题-自定义指令实现场景
示例:v-lazy(图片懒加载)、v-permission(权限控制)
钩子函数:mounted、updated、unmounted等
一、自定义指令核心机制
- 指令生命周期钩子
const myDirective = {// 元素插入父节点时调用(初始化)mounted(el, binding, vnode) {},// 所在组件更新后调用(响应式数据变化)updated(el, binding, vnode) {},// 元素卸载前调用(清理工作)unmounted(el) {}
}
• 参数说明:
• el
:指令绑定的DOM元素
• binding
:包含 value
(绑定值)、oldValue
、arg
(参数)、modifiers
(修饰符)
• vnode
:虚拟节点上下文
- 全局注册方式
// main.js
app.directive('permission', permissionDirective)
二、v-lazy 图片懒加载实现
- 核心功能设计
• 监听滚动事件:通过 Intersection Observer API 监控元素可视状态
• 数据加载策略:优先加载视口内图片,滚动到底部预加载后续图片
• 性能优化:支持设置加载占位图、错误重试机制
- 完整实现代码
const lazyDirective = {mounted(el, binding) {const imgSrc = el.dataset.src; // 原始图片地址存储在data-srcel.setAttribute('src', binding.value.placeholder || 'default-placeholder.png');const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = new Image();img.src = imgSrc;img.onload = () => {el.setAttribute('src', imgSrc);observer.unobserve(el); // 加载后停止观察};img.onerror = () => {el.setAttribute('src', binding.value.error || 'error-image.png');};}});}, { rootMargin: '0px 0px 200px 0px', // 提前200px加载threshold: 0.01 });el._lazyObserver = observer; // 保存观察器实例observer.observe(el);},updated(el, binding) {// 动态更新图片地址时重新处理if (binding.oldValue.src !== binding.value.src) {el.dataset.src = binding.value.src;}},unmounted(el) {el._lazyObserver?.unobserve(el); // 组件卸载时停止观察}
}
- 使用示例
<!-- 基础用法 -->
<img v-lazy="'https://real-image.jpg'"><!-- 高级配置 -->
<img v-lazy="{src: 'https://real-image.jpg',placeholder: 'loading-spinner.gif',error: 'load-fail.png'
}">
三、v-permission 权限控制指令
- 核心功能设计
• 权限校验:对接全局权限管理系统(如Vuex/Pinia)
• 动态更新:权限变化时自动更新DOM状态
• 多模式支持:支持隐藏元素、禁用交互、删除DOM等模式
- 完整实现代码
const permissionDirective = {mounted(el, binding) {checkPermission(el, binding);},updated(el, binding) {checkPermission(el, binding);}
}function checkPermission(el, binding) {// 获取全局权限数据(示例使用Pinia)const authStore = useAuthStore();const hasPermission = authStore.permissions.includes(binding.value);if (!hasPermission) {// 根据修饰符选择处理方式if (binding.modifiers.remove) {el.parentNode?.removeChild(el);} else if (binding.modifiers.disable) {el.disabled = true;el.style.opacity = '0.5';} else {el.style.display = 'none';}}
}
- 使用示例
<!-- 基础权限校验 -->
<button v-permission="'user:delete'">删除用户</button><!-- 修饰符控制处理方式 -->
<div v-permission.remove="'admin:access'">管理员面板</div>
<input v-permission.disable="'data:edit'" placeholder="编辑数据">
四、高级优化技巧
- v-lazy 性能增强
• 图片缓存:对已加载图片进行内存缓存
const imageCache = new Map();function loadImage(src) {if (imageCache.has(src)) {return Promise.resolve(imageCache.get(src));}return new Promise((resolve, reject) => {const img = new Image();img.src = src;img.onload = () => {imageCache.set(src, img);resolve(img);};img.onerror = reject;});
}
- v-permission 动态响应
• 深度监听权限变更:
// 在权限store中添加观察逻辑
authStore.$subscribe((mutation, state) => {document.querySelectorAll('[v-permission]').forEach(el => {const binding = getBinding(el); // 解析指令绑定值checkPermission(el, binding);});
});
五、对比传统实现方案
方案 | 自定义指令优势 | 传统组件劣势 |
---|---|---|
图片懒加载 | 无侵入式DOM操作,复用性强 | 需封装高阶组件,增加模板复杂度 |
权限控制 | 细粒度控制任意DOM元素 | 需包裹组件,样式控制受限 |
性能 | 精准操作目标元素,避免多余渲染 | 可能引起组件树不必要的更新 |
六、生产环境注意事项
-
错误边界处理
• 图片加载失败时降级显示默认图• 权限接口异常时展示友好提示
-
SSR兼容性
• 服务端渲染时禁用指令逻辑if (typeof window !== 'undefined') {// 客户端专用逻辑 }
-
TypeScript支持
declare module '@vue/runtime-core' {interface ComponentCustomProperties {vLazy: typeof lazyDirective;vPermission: typeof permissionDirective;} }
通过自定义指令封装通用DOM操作逻辑,既能保持代码的高复用性,又能实现精准的性能优化。这两个典型案例展示了Vue指令系统在复杂交互场景中的强大能力,是进阶开发的必备技能。
相关文章:
第六节:进阶特性高频题-自定义指令实现场景
示例:v-lazy(图片懒加载)、v-permission(权限控制) 钩子函数:mounted、updated、unmounted等 一、自定义指令核心机制 指令生命周期钩子 const myDirective {// 元素插入父节点时调用(初始化…...
未曾设想的道路1
写在前面: 与其转去读博,倾向自学就业。 中国科学技术大学数学科学学院拥有一支优秀的师资团队,以下是部分教授的简介: 陈发来教授: 荣誉:2024年6月13日,在德国莱布尼茨信息科学中心召开的国际…...
Axure按钮设计分享:打造高效交互体验的六大按钮类型
在产品设计过程中,按钮作为用户与界面交互的核心元素,其设计质量直接影响用户体验与操作效率。Axure作为一款强大的原型设计工具,为设计师提供了丰富的按钮设计选项。本文将围绕基础按钮、禁用按钮、圆角按钮、动态按钮、渐变按钮和图标按钮六…...
MySQL 8.4企业版 安装和配置审计插件
在最新的MySQL 8.4.4企业版上启用审计日志功能 操作系统:Ubuntu 24.04 数据库:8.4.4-commercial for Linux on x86_64 (MySQL Enterprise Server - Commercial) 1.查看安装脚本 下面2个脚本位于mysql安装目录 share 下,一个是window一个是linux可以用…...
AI大模型学习十一:尝鲜ubuntu 25.04 桌面版私有化sealos cloud + devbox+minio,实战运行成功
一、说明 用了ubuntu 25.04,内核为GNU/Linux 6.14.0-15-generic x86_64,升级了部分image,过程曲折啊 sealos 能干啥 对集群生命周期进行管理,一键安装高可用 Kubernetes 集群,增删节点清理集群自恢复等 通过 sealos…...
idea无法下载源代码
通过idea找到用户设置文件路径 查看 setting.xml 文件,找到了以下相关的配置,注释掉这个maven-default-http-blocker的镜像,这个东西阻碍了去阿里的镜像库查找依赖,注释掉。 然后重启idea就能下载了...
【敏矽微ME32G030系列】介绍、环境搭建、工程测试
【敏矽微ME32G030系列】介绍、环境搭建、工程测试 本文介绍了敏矽微ME32G030系列单片机及开发板、包括参数特点、原理图、应用场景,以及开发环境搭建、工程测试等流程。 简介 本节介绍了开发板主控、特点、开发板原理图、板载资源等信息。 主控 开发板采用 ME3…...
Hooks的使用限制及原因
Hooks的使用限制及原因 Hooks的核心限制 只能在函数组件顶层调用 ⭐不能在条件语句、循环、嵌套函数中调用 ⭐只能在React函数组件或自定义Hooks中调用 ⭐ 为什么有这些限制? 根本原因:React依赖Hooks的调用顺序 React内部使用数组来存储每个组件的…...
【JavaScript】二十六、正则表达式
文章目录 1、正则表达式1.1 定义1.2 校验 2、元字符2.1 边界符2.2 量词2.3 字符类2.3.1 方括号[ ]2.3.2 小点.2.3.3 预定义 2.4 案例:用户名验证 3、修饰符3.1 语法3.2 案例:过滤敏感词 1、正则表达式 Regular Expression,正则表达式&#x…...
Geek强大的电脑卸载软件工具,免费下载
一款强大的卸载电脑软件工具,无需安装 免费下载...
tomcat Server 连接服务器 进展
由于机房的环境变更,所接触的问题也不一样!!!! 但后来出现以下提示: 已连接到服务器 配置错误: 部署源 springmvc:war 无效[2025-04-23 11:19:50,192] 工件 springmvc:war: 部署工件时出错。请参阅服务器日…...
Elasticsearch 集群节点下线方案
Elasticsearch 集群节点下线方案 在 Elasticsearch(ES)集群中,节点(Node)下线可能会影响数据的可用性和集群的健康状态。因此,正确的下线步骤需要确保数据不会丢失,并且不会影响查询或写入。 &…...
【模板匹配】图像处理(OpenCV)-part10
19.1模板匹配 模板匹配就是用模板图(通常是一个小图)在目标图像(通常是一个比模板图大的图片)中不断的滑动比较,通过某种比较方法来判断是否匹配成功,找到模板图所在的位置。 不会有边缘填充。 类似于卷积,…...
VMware中CentOS 7虚拟机设置固定IP(NAT模式)完整教程
前言 在VMware中为CentOS 7虚拟机配置固定IP是搭建稳定服务环境的关键步骤。本文基于用户提供的最新配置文件,详细演示如何从DHCP自动获取IP调整为固定IP(192.168.89.129),并提供修改前后的配置对比及操作验证。 一、当前配置状态…...
Ragflow、Dify、FastGPT、COZE核心差异对比与Ragflow的深度文档理解能力和全流程优化设计
一、Ragflow、Dify、FastGPT、COZE核心差异对比 以下从核心功能、目标用户、技术特性等维度对比四款工具的核心差异: 核心功能定位 • Ragflow:专注于深度文档理解的RAG引擎,擅长处理复杂格式(PDF、扫描件、表格等)的…...
飞帆控件:在编辑模式下额外加载的库
飞帆是一个自由的控件设计平台。在飞帆中,我们可以很方便地创建基于 Vue 2 组件的控件,并使用控件来搭建网页。 他山之石,可以攻玉。在创建控件中,使用 js 、css 依赖库能让我们的控件更强大。 有些时候,在编辑模式下…...
Agentic AI——当AI学会主动思考与决策,世界将如何被重塑?
一、引言:2025,Agentic AI的元年 “如果ChatGPT是AI的‘聊天时代’,那么2025年将开启AI的‘行动时代’。”——Global X Insights[1] 随着Agentic AI(自主决策型人工智能)的崛起,AI系统正从被动应答的“工具…...
68元撬动未来:明远智睿2351开发板重塑嵌入式开发生态
在嵌入式开发领域,价格与性能的矛盾始终存在:高端开发板功能强大但成本高昂,低价产品则往往受限于性能与扩展性。明远智睿2351开发板以68元(含税)的定价打破这一僵局,通过四核1.4G处理器、全功能Linux系统与…...
C# 全局 Mutex 是否需使用 `Global\` 前缀
回顾一下Mutex在Windows中的作用。Mutex是用于同步多个进程或线程的机制,确保同一时间只有一个实例访问资源。当创建Mutex时,如果命名时没有指定Global\前缀,默认可能是在会话内创建的,也就是只在当前用户会话中可见。这样的话&am…...
C# 中的 `lock` 关键字本质
C# 中的 lock 关键字本质上是基于 Monitor 类实现的线程同步机制,其核心是通过 互斥锁(Mutex) 确保代码块的原子性执行。以下是其实现本质的分步解析: 1. 语法糖的转换 当使用 lock 关键字时: lock (obj) {// 临界区…...
Java 集合:泛型、Set 集合及其实现类详解
参考资料:java入门到飞起 Java;泛型;Set 集合;TreeSet;HashSet;数据结构 一、引言 在 Java 编程中,集合框架是一个重要的组成部分,它提供了丰富的数据结构和算法来存储和操作数据。泛型与 Set…...
前端基础之《Vue(8)—内置组件》
一、Vue2.0中的内置组件 1、<slot> 插槽 2、<keep-alive> 动态组件 被keep-alive所包裹的组件: (1)不会被销毁。 (2)还会多两个生命周期钩子:activated()、deactivated()。 (3&a…...
Zookeeper是什么?基于zookeeper实现分布式锁
zookeeper听的很多,但实际在应用开发中用的不错,主要是作为中间件配合使用的,例如:Kafka。 了解zk首先需要知道它的数据结构,可以想象为树、文件夹目录。每个节点有基本的信息,例如:创建时间、…...
计算机网络 第二章:应用层(四)
2.6 视频流和内容分发网 对如何在因特网中实现流行的视频流服务进行概述。它们的实现方式是使用应用层协议和以像高速缓存那样方式运行的服务器。 2.6.1 因特网视频 在流式存储视频应用中,基础的媒体是预先录制的视频,例如电影、电视节目、录制好的体育…...
什么是数据库的DDL和DML,有什么区别?
数据库中的 DDL 和 DML 是两类不同的 SQL 语言,用于不同的数据库操作目的。以下是它们的定义、区别和具体说明: 1. DDL(Data Definition Language,数据定义语言) 作用:定义或修改数据库的结构(…...
HCIP实验二(OSPF网络配置与优化)
一.拓扑图与题目 1.R5为ISP,其上只能配置IP地址; R5与其他所有直连设备间均使用公有IP;环回地址为100.1.1.1/3 2.R4设备为企业出口路由器 3.整个0SPF环境IP基于172.16.0.0/16划分 4.所有设备均可访问R5的环回; 5.减少LSA的更新里,加快收敛࿰…...
第十六讲、isaaclab中使用任务空间(task-space)控制
0 前言 官方教程:https://isaac-sim.github.io/IsaacLab/main/source/tutorials/05_controllers/run_diff_ik.html IsaacsimIsaaclab安装:https://blog.csdn.net/m0_47719040/article/details/146389391?spm1001.2014.3001.5502 在之前的教程中我们利…...
无人船 | 图解基于PID控制的路径跟踪算法(以欠驱动无人艇Otter为例)
目录 1 PID控制的三大组成1.1 比例控制作用1.2 积分控制作用1.3 微分控制作用 2 基于欠驱动运动学的PID控制3 跟踪效果分析 1 PID控制的三大组成 PID控制律的定量表达请参考无人船 | 图解基于PID控制的路径跟踪算法(以全驱动无人艇WAMV为例),本文进一步介绍PID每个…...
【C++】13.list的模拟实现
首先,我们需要把链表管理起来,也就是把一个个节点管理起来,但是每个节点的信息我们也需要管理,例如节点的前驱指针和后驱指针,以及节点的值,所以我们这里先封装两个类来管理节点和链表。 namespace Ro {te…...
Springfox + Swagger 的完整配置及同类框架对比的详细说明
以下是 Springfox Swagger 的完整配置及同类框架对比的详细说明: 一、Springfox Swagger 配置详解 1. 添加依赖 在 pom.xml 中添加以下依赖: <!-- Springfox Swagger 2 --> <dependency><groupId>io.springfox</groupId>…...
实现支付宝沙箱环境搭建
1.介绍 在业务开发的过程中,有时会涉及到一些支付相关的功能,这个时候就需要接入第三方支付接口,而由于开发中需要不断进行测试,使用真实的账号进行支付就有些不值得,所以支付宝为我们提供了第三方SDK,供我…...
element-ui transfer 组件源码分享
transfer 穿梭框组件源码简单分享,主要从以下几个方面: 1、transfer 组件页面结构。 2、transfer 组件属性。 3、transfer 组件方法。 4、transfer 组件事件。 5、transfer slot 挂载。 一、组件页面结构。 二、组件属性。 2.1 value / v-model 绑…...
【最新版】沃德代驾源码全开源+前端uniapp
一.系统介绍 基于ThinkPHPUniapp开发的代驾软件。系统源码全开源,代驾软件的主要功能包括预约代驾、在线抢单、一键定位、在线支付、车主登记和代驾司机实名登记等。用户可以通过小程序预约代驾服务,系统会估算代驾价格并推送附近代驾司机供用户选择&…...
【无标题】spark安装部署
Spark 4种部署模式的另外2种,分别是Yarn、windows模式。 二、 实验准备工作: 1. 三台linux虚拟机 2. spark的压缩包 三、 实验步骤 Spark-yarn 1. 解压缩文件,并重命名为spark-yarn。 tar zxvf spark-3.0.0-bin-hadoop3.2.tgz mv spar…...
【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案
博主介绍:✌全网粉丝22W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
中兴云电脑W102D_晶晨S905X2_216G_mt7661无线_安卓9.0_线刷固件包 准备工作: 工具和设备在开始刷机之前,确保你已经准备好以下物品:双公头USB线:选择一根30-50厘米长的USB线,长度适中,方便操作,…...
深度学习激活函数与损失函数全解析:从Sigmoid到交叉熵的数学原理与实践应用
目录 前言一、sigmoid 及导数求导二、tanh 三、ReLU 四、Leaky Relu五、 Prelu六、Softmax七、ELU八、极大似然估计与交叉熵损失函数8.1 极大似然估计与交叉熵损失函数算法理论8.1.1 伯努利分布8.1.2 二项分布8.1.3 极大似然估计总结 前言 书接上文 PaddlePaddle线性回归详解…...
Kotlin中实现静态
实现“类似静态” class Util {fun action1() {}//使用companion object关键字会在类的内部创建一个伴生类,每个类都允许有一个伴生类//而action2作为伴生类中的方法,可以直接通过类名进行调用,实现类似“静态”的效果companion object {fun…...
Android 回显
//执行 private void playRunTime(String cmd) throws Exception { Process p Runtime.getRuntime().exec(cmd); InputStream is p.getInputStream(); BufferedReader reader new BufferedReader(new InputStreamReader(is)); String l…...
基于大模型的胃食管反流病全周期预测与诊疗方案研究
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、胃食管反流病概述 2.1 疾病定义与分类 2.2 流行病学特征 2.3 发病机制 三、大模型技术原理与应用基础 3.1 大模型简介 3.2 适用于胃食管反流病预测的大模型类型 3.3 数据收集与预处理 四、大模型在胃食…...
class文件(二)
字段表集合: 用于描述接口或类中声明的变量 包括类级变量以及实例级变量,不包括方法内部声明的局部变量 字段的修饰符包括: 作用域:public、private、protected修饰符 实例还是类变量:static 可变性:fin…...
Django 实现电影推荐系统:从搭建到功能完善(附源码)
前言:本文将详细介绍如何使用 Django 构建一个电影推荐系统,涵盖项目的搭建、数据库设计、视图函数编写、模板渲染以及用户认证等多个方面。🔗软件安装、环境准备 ❤ 【作者主页—📚阅读更多优质文章、获取更多优质源码】 目录 一…...
UML2.0中的14种图简介,并借助AI生成UML图
UML2.0中的14种图简介,并借助AI生成UML图 绘制流程结构图(Structure Diagrams)1. 类图(Class Diagram):2. 对象图(Object Diagram):3. 组件图(Component Diag…...
Jsoup、Selenium 和 Playwright 的含义、作用和区别
文章目录 一、Jsoup1. 含义2. 作用3. 核心特性4. 适用场景 二、Selenium1. 含义2. 作用3. 核心特性4. 适用场景 三、Playwright1. 含义2. 作用3. 核心特性4. 适用场景 四、Jsoup、Selenium 和 Playwright 的区别五、适用场景对比六、总结 Jsoup、Selenium 和 Playwright 都是用…...
服务器如何修复SSL证书错误?
修复服务器上的SSL证书错误需要根据具体错误类型逐步排查和解决。以下是常见的步骤和解决方案: --- ### **1. 确认错误类型** 首先检查浏览器或工具(如OpenSSL)报错的具体信息,常见错误包括: - **证书过期**…...
AD9253链路训练
传统方式 参考Xilinx官方文档xapp524。对于AD9253器件 - 125M采样率 - DDR模式,ADC器件的DCO采样时钟(500M Hz)和FCO帧时钟是中心对齐的,适合直接采样。但是DCO时钟不能直接被FPGA内部逻辑使用,需要经过BUFIO和BUFR缓冲后,得到s_b…...
VAE-LSTM异常检测模型复刻报告
VAE-LSTM异常检测模型复刻报告 复刻背景 本报告记录了我复刻VAE-LSTM异常检测模型的完整过程。原论文提出了一种结合变分自编码器(VAE)和长短期记忆网络(LSTM)的异常检测方法,用于时间序列数据。 环境配置 复刻过程中使用的环境配置如下: Python 3.…...
有哪些信誉良好的脂多糖供应商推荐?
一般描述 Sigma-Aldrich的脂多糖 (LPS) 是糖脂,由连接单个或多个脂肪酸的碳水化合物单元组合而成,存在于革兰氏阴性菌细胞壁中。LPS是外膜的重要组成部分,结构由脂质A、葡萄糖胺基磷脂、短核寡糖和O-抗原(远端多糖)组…...
初识分布式事务原理
事务是指符合ACID特性的操作就是事务,在同一个数据库中,如果要分别对表A和表B进行插入和删除操作,如果其中一个操作执行失败,可以对当前数据库进行回滚,使其回滚到执行操作前的状态,但是现有的系统架构都是…...
文件上传过程中出现EOFException的解决方案
文件上传过程中出现EOFException的解决方案 项目场景: 项目是一个考试测评系统,包含学生答题截图上传功能。学生通过前端界面提交答题截图,后端服务接收并处理这些图片文件,存储到MinIO对象存储中。 问题描述 前端调用’提交答…...