当前位置：首页 > news >正文

Vue通用组件设计原则

news 来源：原创 2025/7/27 19:56:28

在 Vue.js 开发中，设计通用组件是一项重要的任务，可以提升代码的复用性和可维护性。以下是通用组件设计的主要原则和最佳实践：

1. 清晰的职责划分

通用组件应该具有单一的职责，专注于完成某一类特定功能，而不依赖具体的业务逻辑。

例子：
- 正确：设计一个通用的按钮组件 <BaseButton>，仅处理样式和点击事件。
- 错误：设计一个既包含按钮样式，又内置了特定业务逻辑的组件。

2. 可配置性

通用组件应该通过 props 提供灵活的配置，允许父组件根据需要调整其行为和外观。

示例：

<template><button :class="computedClass" :disabled="disabled" @click="handleClick"><slot></slot></button>
</template><script>
export default {props: {type: { type: String, default: 'primary' }, // 按钮类型disabled: { type: Boolean, default: false }, // 是否禁用},computed: {computedClass() {return `btn-${this.type}`;},},methods: {handleClick(event) {this.$emit('click', event); // 触发事件},},
};
</script>

3. 高度解耦

避免组件直接依赖具体的业务逻辑或数据模型，保持通用性。通用组件通过 props 输入和事件输出与外界通信。

实践：
- 用 props 提供输入，例如数据源、样式配置等。
- 用 $emit 提供输出，例如触发事件，而不是直接操作父组件的数据。

4. 支持插槽（Slots）

使用插槽为通用组件提供灵活的内容替换能力，增强扩展性。

单插槽：
提供默认插槽，用于填充主要内容。

<template><div class="card"><slot></slot></div>
</template>

具名插槽：
提供多个插槽，满足复杂结构需求。

<template><div class="card"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

5. 简洁的 API

提供一个直观且最小化的 API，避免过多的配置选项，使组件易于使用。

最佳实践：
- 保持 props 的数量适中，避免冗杂。
- 使用有意义的默认值，减少必需配置项。
- 提供文档，清晰描述组件功能和使用方法。

6. 遵循 Vue 的单向数据流

组件应该遵循 Vue 的单向数据流原则：

父组件通过 props 传递数据到子组件。
子组件通过事件发送数据或通知父组件。

示例：

<template><input :value="value" @input="handleInput">
</template><script>
export default {props: ['value'],methods: {handleInput(event) {this.$emit('input', event.target.value); // 触发更新事件},},
};
</script>

7. 可扩展性

设计时考虑未来可能的扩展需求，尽量使用可扩展的方式实现功能。例如，使用动态类名或动态样式支持定制化需求。

动态样式：

<template><button :class="['btn', customClass]" :style="customStyle"><slot></slot></button>
</template><script>
export default {props: {customClass: { type: String, default: '' },customStyle: { type: Object, default: () => ({}) },},
};
</script>

8. 无状态化

通用组件应尽量保持“无状态”，避免直接管理复杂状态，将状态管理交由父组件负责。

正确：
- 组件通过 props 接收状态，通过 emit 通知父组件更新。
错误：
- 组件内部维护复杂的状态，并试图直接操作外部数据。

9. 良好的性能优化

使用 v-once、v-memo 或 computed 缓存不变的数据。
使用 key 提升列表渲染的性能。
对于高频触发的事件（如滚动、鼠标移动），考虑节流或防抖处理。

10. 统一的样式和规范

通用组件的样式应尽量独立，避免干扰全局样式或其他组件。

使用 scoped 或 BEM 命名规范：

<style scoped>
.btn-primary {background-color: blue;color: white;
}
</style>

11. 易测试

确保组件是易于测试的，可以通过单元测试或集成测试验证其功能是否正常。

使用工具如 Vue Test Utils 编写测试用例。
确保组件行为（如事件触发、样式应用等）符合预期。

总结

原则	描述
单一职责	每个组件只专注于一项功能，避免混入具体业务逻辑。
可配置性	提供灵活的 `props` 和事件，满足不同需求。
插槽支持	使用插槽提供内容扩展能力，适应不同场景。
简洁 API	提供直观、最小化的配置选项。
单向数据流	遵循 Vue 的单向数据流设计模式，避免双向绑定造成复杂性。
无状态化	尽量避免在组件内部管理复杂状态，将状态交由父组件管理。
性能优化	缓存数据、优化事件处理、合理使用 `key`。
统一样式	使用局部样式或命名规范，避免污染全局样式。
易测试	确保组件功能易于通过测试验证。

良好的组件设计不仅可以提升代码的复用性，还能大幅降低维护成本，为项目的扩展性奠定基础。

Vue通用组件设计原则

在 Vue.js 开发中，设计通用组件是一项重要的任务，可以提升代码的复用性和可维护性。以下是通用组件设计的主要原则和最佳实践： 1. 清晰的职责划分通用组件应该具有单一的职责，专注于完成某一类特定功能，而不依赖具体…...

编程日记 2025/7/27 19:56:28

uniapp页面样式和布局和nvue教程详解

uniapp页面样式和布局和nvue教程尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素。rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大…...

编程日记 2025/7/23 22:12:54

Ubuntu问题 -- 设置ubuntu的IP为静态IP (图形化界面设置) 小白友好

目的为了将ubuntu服务器IP固定, 方便ssh连接人在服务器前使用图形化界面设置设置找到自己的网卡名称, 我的是 eno1, 并进入设置界面查看当前的IP, 网关, 掩码和DNS (注意对应eno1) nmcli dev show掩码可以通过以下命令查看完整的 (注意对应eno1) , 我这里是255.255.255.…...

编程日记 2025/7/26 19:08:52

【Java】期末复习章节未完待续(版)

文章目录【01算法类】1.1 使用冒泡排序算法对数组a{9, 7, 4, 6, 3, 1,10}，按由小到大的规律排序数组中的元素。1.2 从键盘输入一个4位整数n，判断n是否是回文数。（回文数是指，将其数字反转排列的数与其本身相同。例如：…...

编程日记 2025/7/23 21:51:15

C语言数据结构——详细讲解双链表

从单链表到双链表：数据结构的演进与优化前言一、单链表回顾二、单链表的局限性三、什么是双链表四、双链表的优势1.双向遍历2.不带头双链表的用途3.带头双链表的用途五、双链表的操作双链表的插入操作（一）双链表的尾插操作（二&a…...

编程日记 2025/7/25 7:54:05

经验笔记：Git 中的远程仓库链接及上下游关系管理

Git 中的远程仓库链接及上下游关系管理 1. 远程仓库的链接信息当你克隆一个远程仓库时，Git 会在本地仓库中记录远程仓库的信息。这些信息包括远程仓库的 URL、默认的远程名称（通常是 origin），以及远程仓库中的所有分支和标签。…...

编程日记 2025/7/26 12:09:41

Swift闭包的本质

1 闭包的本质其实是一个引用类型：存储在堆空间上，由堆分配空间，且生命周期由ARC（自动引用计数机制）管理 2 捕获值：闭包会捕获上下文使用到的变量（引用类型会保持引用关系）&#xff…...

编程日记 2025/7/24 3:42:09

【SKFramework框架核心模块】3-2、音频管理模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群：398291828小红书小破站大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。一、前言【Unity3D框架】SKFramework框架完全教程《全…...

编程日记 2025/7/26 14:00:50

常用Rust日志处理工具教程

在本文中，我想讨论Rust中的日志。通过一些背景信息，我将带您了解两个日志库：env_logger和log4rs。最后，我将分享我的建议和github的片段。 Rust log介绍 log包是Rust中日志API的事实标准，共有五个日志级别&#xff1…...

编程日记 2025/7/27 19:50:56

深入理解索引（二）

1.引言在数据库和数据结构中，索引（Index）是一种用于提高数据检索速度的重要机制。本文将详细深入介绍索引。 2. 为什么要使用索引大家在使用索引之前一定要搞清楚使用索引的目的，因为索引的不当使用可能不但起不到正向作用&a…...

编程日记 2025/7/26 22:04:08

Python 开发工具 -- PyCharm 简介

一、PyCharm 简介 PyCharm 是由 JetBrains 打造的一款 Python IDE。 PyCharm 具备一般 Python IDE 的功能，比如：调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测试、版本控制等。另外，PyCharm 还提供了一些很好的功能用…...

编程日记 2025/7/22 5:27:25

C# 属性学习理解记录

字段和属性左边字段，右边属性拓展，属性安全： 1、设置public private 和protected 等，只读，只写， 2、在get set 方法时，验证，异常时抛出错误...

编程日记 2025/6/29 1:19:51

使用chrome 访问虚拟机Apache2 的默认页面，出现了ERR_ADDRESS_UNREACHABLE这个鸟问题

本地环境主机MacOs Sequoia 15.1虚拟机Parallels Desktop 20 for Mac Pro Edition 版本 20.0.1 (55659)虚拟机-操作系统Ubuntu 22.04 服务器版本最小安装开发环境编辑器编译器调试工具数据库http服务web开发防火墙Vim9Gcc13Gdb14Mysql8Apache2Php8.3Iptables 第一坑数…...

编程日记 2025/7/25 16:22:39

【大数据学习 | Spark-Core】Spark的分区器(HashPartitioner和RangePartitioner)

之前学过的kv类型上面的算子 groupby groupByKey reduceBykey sortBy sortByKey join[cogroup left inner right] shuffle的 mapValues keys values flatMapValues 普通算子，管道形式的算子 shuffle的过程是因为数据产生了打乱重分，分组、排序、join等…...

编程日记 2025/7/8 13:54:49

第六届国际科技创新学术交流大会（IAECST 2024）暨第四届物流系统与交通运输国际学术会议（LSTT 2024）

重要信息会议官网：www.lstt.org 大会时间：2024年12月6-8日大会地点：中国-广州大会简介第六届国际科技创新学术交流大会暨第四届物流系统与交通运输国际学术会议（LSTT 2024）将于2024年12月6-8日在广州举办&…...

编程日记 2025/7/26 19:08:32

看Threejs好玩示例，学习创新与技术(ogl)

本文标题可能看的你莫名奇妙，什么是ogl？ogl是一个新的三维引擎库，可以简单任务是非常简化的ThreeJS。下面图是它的一个示例，可见虽然它是一个麻雀，但五脏还是比较全的。 1、先说OGL OGL的代码非常简单，主要…...

编程日记 2025/7/26 11:11:01

读书笔记_《创华为.任正非传》_精华书摘

人生经历 43岁，开始创建华为爷爷:金华火腿乡间厨师父亲: 1910年生，北平民大经济系读书->职业学校任教->国民党兵工厂会计，组织读书会(读书会后来有很多人在新中国成立后成为高级干部。) 母亲: 高中毕业，乡村教师&#xf…...

编程日记 2025/7/21 9:04:41

4.4 MySQL 触发器（Trigger）

触发器是一种特殊的数据库对象，在特定事件（如INSERT、UPDATE或DELETE）触发时自动执行定义好的操作。它可以帮助我们实现更高效的数据管理和业务规则的约束。 1. 简介 1.1 什么是触发器触发器（Trigger）是由用户定义的…...

编程日记 2025/7/27 0:30:50

遗传算法（Genetic Algorithm, GA）

简介遗传算法（Genetic Algorithm, GA）是一种基于自然选择和遗传机制的优化算法，由 John Holland 于20世纪70年代提出。它是一种模拟生物进化过程的启发式搜索算法，被广泛应用于函数优化、机器学习、调度问题等领域。代码说明 …...

编程日记 2025/7/26 15:32:36

CentOS8.5.2111（7）完整的Apache综合实验

一、实验目标 1.掌握Linux系统中Apache服务器的安装与配置； 2.掌握个人主页、虚拟目录、基于用户和主机的访问控制及虚拟主机的实现方法。二、实验要求练习使用linux系统下WEB服务器的配置方法。三、实验背景重庆工程学院为筹备“重庆工程大学”特申请了c…...

编程日记 2025/7/26 23:12:28

flink学习（3）——方法的使用—对流的处理（map，flatMap，filter）

map 数据 86.149.9.216 10001 17/05/2015:10:05:30 GET /presentations/logstash-monitorama-2013/images/github-contributions.png 83.149.9.216 10002 17/05/2015:10:06:53 GET /presentations/logstash-monitorama-2013/css/print/paper.css 83.149.9.216 10002 17/05/20…...

编程日记 2025/7/25 4:49:43

Feed流系统重构：架构篇

重构对我而言，最大的乐趣在于解决问题。我曾参与一个C#彩票算奖系统的重构，那时系统常因超时引发用户投诉。接手任务时，我既激动又紧张，连续两天几乎废寝忘食地编码。结果令人振奋，算奖时间从一小时大幅缩短至十分钟。…...

编程日记 2025/7/22 21:24:26

YOLOv11融合[NeurlS2022]递归门控卷积gnconv模块及相关改进思路

YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总《HorNet: Efficient High-Order Spatial Interactions with Recursive Gated Convolutions》一、模块介绍论文链接：https://arxiv.org…...

编程日记 2025/7/26 16:34:54

java: itext 5.5 create pdf

/*** encoding: utf-8* 版权所有 2024 ©涂聚文有限公司* 许可信息查看： https://github.com/itext/itext-publications-examples-java/blob/develop/src/main/java/com/itextpdf/samples/sandbox/fonts/FreeSansBold.java* 描述：https://mvnreposit…...

编程日记 2025/7/22 8:30:30

EF Core学习笔记二

一、新建.net core的控制台项目二、安装Entity Framework Core 我们使用的数据库是Sqlite，所以我们需要的程序包是Microsoft.EntityFrameworkCore.Sqlite。如果想了解更多EF Core NuGet包，请参考：EF Core NuGet 包 | Microsoft Learn Install-Package Microsoft.Entit…...

编程日记 2025/7/21 22:13:41

快速排序【hoare版】

目录介绍算法思路函数实现函数声明确定基准值创建新函数创建循环找数据（right，left） 交换左右数据交换条件设置外部循坏条件设置初步总结代码循环条件完善内层循环的完善外层循环的完善相遇值大于keyi 相遇值等于k…...

编程日记 2025/7/25 12:20:14

day03（单片机高级）RTOS

目录 RTOS(实时操作系统) 裸机开发模式轮询方式前后台（中断方式） 改进（前后台（中断））定时器裸机进一步优化裸机的其他问题 RTOS的概念什么是RTOS 为什么要使用 RTOS RTOS的应用场景 RTOS的…...

编程日记 2025/7/24 18:43:52

vue中v-if和v-show的区别

文章为本菜鸡学习过程中遇到的问题记录，不是专业的，如有问题和不足还请大佬指正 >参考文章文章目录前言1、v-if2、v-show3、v-if和v-show的区别前言问题描述： 在完成表单验证任务的学习过程中，发现在使用v-show隐藏元素后…...

编程日记 2025/7/22 17:15:07

MacOS通过VMware Fusion安装windows 11问题汇总

环境虚拟机，VMware Fusion 13.6.1本地机器，ARM芯片的Mac，系统版本14.5Windows系统镜像，Window11 ARM 64 bit 安装卡在WiFi连接界面适合我本地环境的解决步骤为： 1、系统设置网络共享我开启的是en5，这…...

编程日记 2025/7/25 5:28:03

Stable Diffusion的解读（二）

Stable Diffusion的解读（二） 文章目录 Stable Diffusion的解读（二）摘要Abstract一、机器学习部分1. 算法梳理1.1 LDM采样算法1.2 U-Net结构组成 2. Stable Diffusion 官方 GitHub 仓库2.1 安装2.2 主函数2.3 DDIM采样器2.4 Unet 3…...

编程日记 2025/7/27 17:07:38

十五届蓝桥杯赛题-c/c++ 大学b组

握手问题很简单，相互牵手即可，但是要注意，第一个人只能与其他49个人牵手，所以开头是加上49 #include <iostream> using namespace std; int main() {int cnt0;for(int i49;i>7;i--){cnti;//cout<<i<<&quo…...

编程日记 2025/7/18 22:24:56

NFS搭建

NFS搭建单节点安装配置服务器安装配置启动并使NFS服务开机自启客户端挂载查看是否能发现服务器的共享文件夹创建挂载目录临时挂载自动挂载双节点安装配置服务器安装配置服务端配置NFS服务端配置Keepalived编辑nfs_check.sh监控脚本安装部署RsyncInofity 客户端单节点安装配置…...

编程日记 2025/7/24 18:15:16

【贪心算法第二弹——2208.将数组和减半的最小操作数】

1.题目解析题目来源 2208.将数组和减半的最小操作数——力扣测试用例 2.算法原理(贪心策略) 3.实战代码 class Solution { public:int halveArray(vector<int>& nums) {priority_queue<double> hash;double sum 0.0;for(auto e : nums){hash.push(e);sum …...

编程日记 2025/7/25 19:52:36

ByteBuffer 与 ByteBuf 的对比与优缺点分析

在 Java 网络编程和高性能 I/O 场景中，ByteBuffer 和 ByteBuf 是两种重要的缓冲区处理工具。ByteBuffer 是 Java NIO 标准库的一部分，而 ByteBuf 是由 Netty 框架提供的增强缓冲区工具。在实际开发中，选择哪一种取决于场景需求和性能目标。 …...

编程日记 2025/7/23 13:12:49

SpringBoot 集成 html2Pdf

一、概述： 1. springboot如何生成pdf，接口可以预览可以下载 2. vue下载通过bold如何下载 3. 一些细节：页脚、页眉、水印、每一页得样式添加二、直接上代码【主要是一个记录下次开发更快】模板位置 1. 导入pom包 <dependency><g…...

编程日记 2025/7/26 23:17:39

【IDEA】插件篇

环境：Mac M ，IDEA 2024.2.4 一、汉化 & 汉化后转回英文 1、汉化 IntelliJ IDEA -> Preferences -> Plugins -> MarketPlace，输入 chinese，点击安装，安装完成后重启IDE 2、汉化后转回英文 IntelliJ …...

编程日记 2025/7/26 19:19:20

librdns一个开源DNS解析库

原文地址：librdns一个开源DNS解析库 – 无敌牛欢迎参观我的个人博客：无敌牛 – 技术/著作/典籍/分享等介绍 librdns是一个开源的异步多功能插件式的解析器，用于DNS解析。源代码地址：GitHub - vstakhov/librdns: Asynchrono…...

编程日记 2025/7/23 4:46:41

数据结构【带环单链表】

在单链表中可能会存在一种情况，某一结点在经过几次转移之后回到了自己本身，这种情况就称之为带环链表。对于带环链表，我们不能轻易对其进行遍历，遍历可能会导致产生死循环。带环链表的逻辑图如下所示：（这…...

编程日记 2025/7/26 18:40:20

CodiMD导出pdf失败或无中文

CodiMD导出pdf失败，弹出文件保存窗口，有个pdf文件能下载，但是保存的时候提示“网站出问题了”，实际到服务器上看会发现docker崩溃了。解决办法： 使用最新的CodiMD镜像，如nabo.codimd.dev/hackmdio/hackmd:…...

编程日记 2025/7/17 12:38:10

基于Java Springboot高校教务管理系统

一、作品包含源码数据库设计文档万字PPT全套环境和工具资源部署教程二、项目技术前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境开发工具：IDEA/eclipse 数据…...

编程日记 2025/7/24 12:27:04

大数据调度组件之Apache DolphinScheduler

Apache DolphinScheduler 是一个分布式易扩展的可视化 DAG 工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系，使调度系统在数据处理流程中开箱即用。主要特性易于部署，提供四种部署方式，包括Standalone、Cluster、Docker和…...

编程日记 2025/7/24 20:10:55

Python 快速入门（上篇）❖ Python基础知识

Python 基础知识 Python安装**运行第一个程序：基本数据类型算术运算符变量赋值操作符转义符获取用户输入综合案例：简单计算器实现Python安装** Linux安装： yum install python36 -y或者编译安装指定版本：https://www.python.org/downloads/source/ wget https://www.pyt…...

编程日记 2025/7/21 9:22:38

JAVA实现将PDF转换成word文档

POM.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…...

编程日记 2025/7/21 1:11:31

Python学习29天

二分查找 # 定义函数冒泡排序法从大到小排列 def bbble_sort(list):# i控制排序次数for i in range(len(list) - 1):# j控制每次排序比较次数for j in range(len(list) - 1 - i):if list[j] < list[j 1]:list[j], list[j 1] list[j 1], list[j] # 定义二分查找函数 def…...

编程日记 2025/7/24 18:22:50

FreeSWITCH 简单图形化界面35 - 使用python脚本

FreeSWITCH 简单图形化界面35 - 使用python脚本测试环境1、mod_python编译2、Python编写拨号规则(dialplan)测试一下不带参数带参数 3、使用Python执行freeSWITCH的API测试一下 4、Python执行session API测试一下 5、Python编写聊天规则(chatplan)测试一下 6、Python执行messa…...

编程日记 2025/7/26 8:36:24

基于AIRTEST和Jmeter、Postman的自动化测试框架

基于目前项目和团队技术升级，采用了UI自动化和接口自动化联动数据，进行相关测试活动，获得更好的测试质量和测试结果。...

编程日记 2025/6/27 21:12:27

web-03

CSS回顾选择器标签选择器标签{}ID选择器标签中定义ID属性。 #ID值{}类选择器标签中使用class属性 .类名{}关于DIV/span div任意的大小的长方形，大小css： width, height控制。—换行 span-- 一行内 CSS常用属性 width/height 宽度/高度定义&…...

编程日记 2025/7/25 5:52:24

MySQL 死锁

一、引言在 MySQL 数据库的使用过程中，死锁问题就像一颗隐藏在暗处的 “定时炸弹”，平时可能感觉不到它的存在，但一旦触发，就可能导致数据库事务无法正常推进，严重影响系统的性能和可用性。对于开发人员和数据库管理员…...

编程日记 2025/7/27 6:38:37

M｜大脑越狱

rating: 7.0 豆瓣: 7.6 上映时间: “2015” 类型: M悬疑导演: 约瑟夫怀特 Joseph White 主演: 亚历山大欧文 Alexander Owen爱德华富兰克林 Edward Franklin 国家/地区: 英国片长/分钟: 20分钟 M｜大脑越狱想法不错，但是逻辑比较一般。属于…...

编程日记 2025/7/26 22:52:23

CSS3_媒体查询（十一）

CSS3_响应式布局 1、媒体样式在不同媒体上显示不同的样式。常用阈值： 小于768px：小屏幕；768px-992px：中等屏幕；992px-1200px：大屏幕；大于1200px：超大屏幕。 <!DOCTYPE html>…...

编程日记 2025/7/23 22:18:28