- 博客(600)
- 收藏
- 关注
RSS订阅原创 Vue.js 3 的设计思路：从声明式UI到高效渲染机制
Vue.js 3 通过声明式UI、虚拟DOM、高效渲染器及组件化设计，构建了一个兼顾性能与开发效率的框架。声明式描述与命令式优化的结合：通过虚拟DOM和编译器优化，减少性能损失模块化架构：编译时与运行时分离，支持Tree-Shaking和静态优化灵活的组件模型：支持函数和对象形式，适应不同场景需求这些设计思路不仅提升了开发体验，也为大型应用的高效渲染奠定了基础。如需进一步了解实现细节，可参考《Vue.js设计与实现》及相关源码分析<script>// 定义虚拟DOM节点props: {},
2025-03-10 23:06:06
911
原创 Vue.js框架设计核心要素解析
框架设计的核心在于平衡功能丰富性与性能、体积、开发体验之间的关系。Vue.js 通过环境区分、Tree-Shaking、模块化构建和类型系统等策略，实现了高效、灵活且易用的框架设计。这些原则不仅适用于 Vue.js，也为其他前端框架的设计提供了重要参考如需进一步探讨具体技术实现（如虚拟 DOM 的编译优化或响应式系统设计），可参考《Vue.js设计与实现》后续章节及相关源码分析。
2025-03-08 16:18:04
804
原创 Vue.js框架设计中的权衡艺术：解析性能、可维护性与范式选择
范式选择：以声明式提升可维护性，通过虚拟DOM逼近命令式性能。性能优化：利用编译时预分析减少运行时开销，同时保留动态能力。架构扩展：混合模式平衡灵活性与效率，适应不同场景需求。正如作者所述：“框架设计是权衡的艺术”，Vue的成功在于在复杂的技术选项中，找到用户体验、维护成本与执行效率的最优解通过这一系列设计，Vue.js不仅降低了开发者的心智负担，还确保了大规模应用的高效运行，成为现代前端开发的标杆框架。
2025-03-08 15:23:49
1063
原创 MySQL进阶篇 === 索引分类
主键索引特点：每个表只能有一个，且会自动创建。通常用于唯一标识表中的每一行记录。用途：确保数据的唯一性，并且可以快速地定位特定数据行。唯一索引特点：可以有多个，用于确保某列或多列中的数据的唯一性。用途：避免数据重复，常用于需要保证唯一性的字段，如邮箱、手机号等。常规索引特点：可以有多个，用于加速数据的查询速度。用途：在需要频繁查询的字段上创建，以提高查询效率。全文索引特点：可以有多个，专门用于在文本数据中进行关键词搜索。用途：适用于需要对大量文本数据进行关键词查找的场景，如文章搜索、内容检索等。
2025-02-27 11:34:08
619
原创 使用el-checkbox-group时，el-checkbox后面的文本或者div不显示
起初setScore类所在的div死活不显示，各种添加样式都不生效，强制渲染也没用，最后发现是font-size等于0，添加样式后ok了。内容因父元素的样式问题（如。
2025-02-26 22:23:19
331
原创 解决 Git 合并冲突：当本地修改与远程提交冲突时
Git 的合并冲突保护机制是为了避免数据丢失，理解其原理后可以通过多种方式灵活解决。关键是根据场景选择策略：需要保留修改 → 提交或储藏（commitstash无需保留修改 → 丢弃重置（手动处理冲突 → 选择性合并通过规范协作流程和善用分支管理，可以显著减少此类问题的发生。延伸学习Git 官方文档 - 合并冲突Git Stash 的进阶用法。
2025-02-25 17:53:36
877
原创 MySQL进阶篇 === 索引结构
在原 B+Tree 的基础上，增加一个指向相邻叶子节点的链表指针，就形成了带有顺序指针的 B+Tree，提高区间访问的性能。B-Tree (多路平衡查找树) 以一棵最大度数（max-degree，指一个节点的子节点个数）为5（5阶）的 b-tree 为例（每个节点最多存储4个key，5个指针）在数据之外，数据库系统还维护着满足特定查找算法的数据结构，这些数据结构以某种方式引用（指向）数据，这样就可以在这些数据结构上实现高级查询算法，这种数据结构就是索引。为了解决上述问题，可以使用 B-Tree 结构。
2025-02-25 15:46:38
573
原创 Git Pull 报错解决方案：fatal: Need to specify how to reconcile divergent branches
若需保留完整合并记录 → 使用。若需保持提交历史线性 → 使用。若本地提交可丢弃 → 强制同步远程分支。根据实际场景选择合适的策略，确保代码合并过程清晰可控！
2025-02-15 10:06:55
1259
原创 ESLint 规则解析：为什么应避免在 in 操作符左侧使用否定？
隐蔽的逻辑错误：确保in操作符的否定行为符合预期。代码健壮性：消除因运行环境差异导致的不确定性。可维护性提升：通过清晰代码结构降低团队协作成本。在编写条件判断时，始终优先使用括号明确操作符优先级，这是保障代码质量和可读性的最佳实践。延伸思考：如何通过其他 ESLint 规则（如）进一步避免逻辑错误？此类规则的组合使用能显著提升代码可靠性，值得开发者深入研究。
2025-02-13 17:57:09
474
原创 解决错误：Do not access Object.prototype method ‘hasOwnProperty‘ from target object no-prototype-builtins
优先使用现代项目（支持 ES2022+）应直接使用，它简洁且安全。旧项目使用显式原型调用通过确保兼容性。避免直接调用除非你完全控制对象结构且无原型链风险。遵循 ESLint 的规则，不仅能避免潜在错误，还能提升代码的健壮性和可维护性。
2025-02-12 20:42:35
573
原创 为什么你应该避免在 Promise 执行器中使用 async 函数？
规则名称规则类型：错误预防适用场景：当检测到 Promise 构造函数接收 async 函数作为参数时触发明确异步边界，保持执行上下文清晰。通过遵循该规则，开发者可以：避免隐蔽的错误处理漏洞提升代码可维护性和可调试性确保内存管理的正确性保持 Promise 标准行为的一致性。
2025-02-12 15:01:11
684
1
原创 【vue深入】项目打包之后，移除console.log和debugge
我们项目做得熟练了，Vue也用的熟悉了，我们就会想着扩展。性能优化就是一个不错的方向这次我们讨论下和debugger。
2025-02-08 13:04:32
643
原创 ESLint + VSCode:如何使用.eslintrc格式化你的代码
我已经非常习惯于在保存时让VSCode自动格式化我的文件。通常情况下，我使用Prettier。但我加入了一个使用ESLint来管理其代码风格的项目，我想与团队的格式化相匹配。我希望在保存时有那种甜蜜的自动格式化，但使用项目根目录下的文件，而不是Prettier。大多数博客文章都想把这个做成一个完整的教程......如何设置eslint，如何创建.eslintrc文件，等等......但我不需要这些。我有一个现有的项目，我只是想配置VSCode来使用ESLint而不是Prettier。
2025-02-07 21:18:15
973
原创 lint-staged === Git提交前的自动化代码检查工具
目录什么是 lint-staged？为什么使用 lint-staged？核心功能1. 只对暂存区文件运行检查2. 与 husky 集成安装和配置1. 安装依赖2. 初始化 husky 配置3. 配置 lint-staged4. 配置 husky 钩子进阶配置1. 多个文件类型2. 运行自定义命令3. 对多个文件同时运行多个命令4. 缓存机制常见问题与解决方案1. 检查命令未生效2. 命令执行失败3. 如何禁用某些文件检查优势小贴士 是一个用于在 Git 暂存区的文件上运行代码检查（linting）工具的工具
2025-02-07 14:42:18
1303
原创 sourcetree === 使用 Git 工作
从远程存储库 (Git) 提取更改如果您的团队中的某个人对远程存储库进行了更改，您希望将这些更改提取到本地。在 SourceTree 中的存储库中，单击按钮出现一个弹出窗口，表明您正在将文件从 Bitbucket 合并到本地存储库。在弹出窗口中单击导航到本地系统上的存储库文件夹，您将看到刚刚添加的文件。SourceTree会使用视图 中的新文件进行更新。提交并推送更改 (Git)当您向存储库添加新文件或进行更改时，您需要暂存、提交并将更改推送到远程存储库。
2025-02-06 12:57:05
836
原创 前端开发之jsencrypt加密解密的使用方法和使用示例
1. 密钥位数512位: 最弱，仅用于测试1024位: 较弱，不推荐2048位 ✅: 推荐使用，安全性和性能均衡3072位: 更安全，但更慢4096位: 最安全，性能最差2. 密钥格式PKCS#1 ✅: 适合JSEncrypt使用，兼容性好PKCS#8: 更现代的格式 支持更多算法3. 输出格式PEM/Base64 ✅: 最常用 可直接复制使用Hex: 十六进制格式 特殊场景使用4. 证书密码可以为空 ✅设置密码会增加安全性，但使用时需要额外步骤密钥位数：2048位。
2025-01-30 17:43:41
1969
原创 axios如何利用promise无痛刷新token
/ 从localStorage中获取token// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中// instance是当前request.js中已创建的axios实例// 创建一个axios实例headers: {'X-Token': getLocalToken() // headers塞token})// 是否正在刷新的标记// 重试队列，每一项将是一个待执行的函数形式if (!
2025-01-29 11:04:03
1781
1
原创 如何使用jwt 完成注销(退出登录)功能
不信的的话可以自己尝试下。使用JWT应该是无状态的，这意味着你应该将所需的一切存储在payload中，并跳过对每个请求执行DB查询，但是如果你计划有一个严格的注销功能，无法等待Token自动过期，即使你已经从客户端清除了Token，然后你可能需要违背无状态规则并执行一些查询。是一个很好的选择，这将允许在内存中快速访问列表，然后，在某个中间件中，运行在每个授权请求上，你应该检查提供的令牌是否在名单中🕵️，如果不在的话就抛出一个未认证异常，如果有让它通过，JWT验证将处理它并确定它是否已过期或仍然有效。
2025-01-26 16:40:56
953
原创 Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，
官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的Svg。最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。
2025-01-25 17:16:37
291
原创 使用 Docker Compose 一键启动 Redis、MySQL 和 RabbitMQ
Docker Compose 是一个用于定义和运行多容器 Docker 应用的工具。通过一个 YAML 文件，我们可以配置多个容器的启动参数、环境变量、网络和卷挂载等信息。这使得部署和管理复杂的多容器应用变得简单而高效。在本文中，我们将使用 Docker Compose 部署 Redis、MySQL 和 RabbitMQ，为微服务应用提供存储、消息队列和数据库支持。通过 Docker Compose，我们可以轻松地部署和管理 Redis、MySQL 和 RabbitMQ 这些关键的微服务基础设施组件。
2025-01-24 17:52:44
2506
原创 速通Docker === Docker 镜像分层存储机制
Docker 的分层存储机制是其高效性和灵活性的关键。通过分层存储，Docker 实现了镜像的轻量化、快速构建与部署以及高效的镜像共享。同时，容器层的临时性和数据持久化机制也为开发者提供了灵活的运行时管理能力。
2025-01-24 11:50:30
1146
原创 速通Docker === Dockerfile
在现代软件开发中，容器化技术正变得越来越流行。Docker 是一个开源的容器化平台，它允许开发者将应用程序及其依赖项打包到一个可移植的容器中，从而实现快速部署和跨平台运行。
2025-01-24 11:45:22
1046
原创 速通Docker === Docker Compose
Docker Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。它通过 YAML 文件配置应用程序的服务、网络和卷，从而可以轻松地启动、停止和管理多个容器。
2025-01-23 16:55:13
753
原创 速通Docker === 使用最佳实践总结
通过以上步骤和示例，我们可以看到 Docker 的使用主要包括命令操作、网络配置、存储管理、环境变量设置和端口映射。这些步骤确保了容器的可移植性、安全性和灵活性。Docker 的最佳实践还包括使用官方镜像、定期更新镜像、合理配置资源限制等，以确保容器的稳定运行和资源的高效利用。
2025-01-23 11:16:30
1077
原创 速通Docker === 快速部署Redis主从集群
Bitnami提供的Redis Docker镜像预配置了多种环境变量，使得部署和配置变得非常简单。此外，该镜像还包含了必要的安全补丁和性能优化，适合生产环境使用。Bitnami Redis镜像的Docker Hub地址为：你可以直接从这个地址拉取镜像，或者在Docker命令中指定该地址来部署Redis实例。持久化你的数据库如果删除容器，所有数据都将丢失，下次运行镜像时，数据库将重新初始化。为了避免数据丢失，您应该安装一个在删除容器后仍能保留的卷。为了持久化，您应该在路径上挂载一个目录。
2025-01-21 22:54:06
1433
2
原创 速通Docker === 网络
为了克服默认网络docker0在稳定性和灵活性方面的不足，Docker提供了自定义网络机制。通过创建自定义网络，我们可以更好地管理和控制容器之间的通信，实现更加稳定和高效的网络访问。执行该命令后，Docker会自动创建一个新的网络，并为其分配一个唯一的网络ID。在启动容器时，我们可以通过--network参数指定容器加入到某个自定义网络中。该命令会启动一个名为app1的Nginx容器，并将其加入到mynet自定义网络中。通过这种方式，我们可以将多个容器组织到同一个网络中，实现它们之间的稳定通信。
2025-01-20 11:04:52
753
2
原创 解决MAC安装软件时提示“xxx.app 显示已损坏”的方法
1、打开电脑【系统设置】，找到【隐私与安全性】，拉到最下面，在【允许从以下位置下载的应用程序】中，选择【任何来源】，如果提示输入密码，就输入密码回车即可，如下图：（注意：系统版本不同可能下图文字表述有不一样，但都是打开任何来源）然后输入电脑密码回车即可（密码输入是看不见的，无视继续输入），即可；上，将出现已损坏的软件拖入终端中（xattr -cr 的后面），再回车！：表示递归操作，即对指定目录及其所有子目录和文件中的扩展属性进行操作。：这是一个命令行工具，用于显示和操作文件或目录的扩展属性。
2025-01-20 10:29:29
1548
原创 速通Docker === 目录挂载 & 卷映射
概念：将宿主机目录或文件映射到容器内指定路径，实现数据共享和同步，防止容器删除后数据丢失。命令特点：直接操作宿主机文件系统，适用于临时数据共享和开发测试。
2025-01-18 00:16:51
1355
原创 如何在Mac上彻底删除Docker及其相关组件：清理指南
通过以上步骤，您可以彻底删除Mac上的Docker及其所有相关组件，确保系统整洁并释放宝贵的磁盘空间。希望这份指南对您有所帮助，让您在管理Docker环境时更加得心应手。如果您有任何疑问或需要进一步的帮助，欢迎查阅Docker官方文档或寻求社区支持。
2025-01-16 11:24:29
3850
原创 速通Docker === 常用命令
搜索镜像docker search [镜像名称]下载镜像docker pull [镜像名称]:latestdocker pull [镜像名称]:[版本号]查看所有镜像删除指定id的镜像docker rmi [镜像ID]
2025-01-16 00:10:14
858
原创 速通Docker === 介绍与安装
Docker 官网： https://www.docker.com/Docker 是一个开源的容器化平台，它允许开发者将应用程序及其依赖项打包到一个轻量级的、可移植的容器中。Docker CLI 是用户与 Docker 交互的接口，用户通过它发送命令。Docker Host 是运行 Docker 守护进程的机器，负责处理 Docker CLI 的命令并管理容器和镜像。容器 是基于镜像创建的运行实例，由 Docker Host 管理。镜像 是容器的只读模板，定义了容器的行为和环境。
2025-01-15 18:04:50
1287
1
原创 MySQL数据库进阶 === 存储引擎
MySQL存储引擎是实现数据存储、索引建立、数据更新查询等功能的技术方式，基于表而非库，也称表引擎。默认存储引擎为InnoDB。
2025-01-13 18:04:48
791
原创 MySQL数据库基础 === 事务
脏读是指一个事务读取到另一个事务尚未提交的数据。在数据库事务的隔离级别中，如果隔离级别设置得过低，就可能出现脏读现象。例如，事务A正在对某条记录进行修改，但尚未提交，此时事务B读取了这条记录。如果事务A最终回滚，那么事务B读取到的数据就是无效的，这就是脏读。假设有一个图书管理系统，其中有一张书籍表，记录了书籍的名称、数量等信息。现在有两个事务，事务A和事务B。事务A执行以下操作：开始事务。将书籍《数据库原理》的数量从10本修改为5本（尚未提交）。事务B执行以下操作：开始事务。
2025-01-13 17:03:00
917
原创 MySQL数据库基础 === 多表查询
在关系型数据库中，数据通常分散在多个表中，而不是存储在单个表中。多表查询是指从一个以上的表中检索数据并将其组合以满足特定需求的操作。检索与多个表关联的数据。在多个表之间建立关联，以便于数据分析。聚合和计算多个表中的数据。更新和删除多个表中的数据。多表查询通常涉及使用 JOIN 子句将不同的表连接在一起，以创建一个包含所需数据的结果集。一、多表查询基础基本概念：通过JOIN子句等将多个表连接，创建包含所需数据的结果集。多表关系类型：包括一对多（多对一）、多对多、一对一三种。
2025-01-11 23:58:01
1170
1
原创 Vue3打包时关闭TS验证：告别TS报错困扰，轻松打包无忧
Vue3 与 TypeScript（TS）的组合无疑是前端开发的黄金搭档。然而，在打包 Vue3 项目时，恼人的 TS 相关报错可能会让人抓狂。这些报错通常与 TS 代码语法校验和验证有关，例如类型错误、变量未定义、属性不存在等。为了彻底解决 Vue3 打包时的 TS 报错问题，最直接的方法是关闭 TS 验证。可以通过在 webpack 或 vite 的配置文件中进行设置来实现。先来看看事件的导火索。
2025-01-10 14:53:29
2151
原创 MySQL数据库基础 === 约束
在关系型数据库中，约束用于限制表中的数据，确保数据的完整性、一致性和准确性。表示如果父表中的记录被删除或更新，数据库将检查子表中的外键是否依赖于这些记录。如果有依赖，则不执行父表的删除或更新操作，具体执行行为取决于数据库的实现。尽管它们看起来类似，但它们的行为在数据库引擎中有一些细微的差别。通过设定外键约束的删除和更新行为，可以控制父表数据变更时，子表如何响应。的行为也是类似的，当父表记录被删除或更新时，如果有子表记录依赖于该父表记录，操作会被拒绝。如果子表存在依赖外键的数据，父表的记录不会被删除或更新。
2025-01-09 15:16:07
530
原创 MySQL数据库基础 === 函数
适用场景简单CASE：适用于基于一个表达式的值进行判断的情况。例如，根据某个字段的值来选择结果。搜索CASE：适用于基于多个条件进行判断的情况。例如，根据多个不同的条件来选择结果。灵活性简单CASE：只能基于一个表达式的值进行判断，适用于简单的值匹配。搜索CASE：可以基于复杂的逻辑条件进行判断，适用于更复杂的逻辑判断。根据具体的需求和场景选择合适的CASE表达式形式，可以使 SQL 查询更加清晰和高效。字符串函数：拼接多个字符串。LOWER(str)：将字符串转为小写。UPPER(str)
2025-01-08 18:10:42
644
原创 webpack的devtool 配置
开发环境eval：用eval()执行代码，行号不准确。：用eval()执行代码，行号准确，生成的 source map 更完整。：用eval()执行代码，行号准确，但不包含列级映射。：类似于，但更好地处理 loader 的 source map。生产环境none：不生成 source map 文件。source-map：生成完整的 source map 文件。：生成 source map 文件，但不会在代码中暴露其引用。：生成 source map 文件，但不包含源代码内容。
2025-01-08 14:31:38
1009
原创 MySQL数据库基础 === DCL数据控制
数据控制语言 (Data Control Language) 在SQL语言中，是一种可对数据访问权进行控制的指令，它可以控制特定用户账户对数据表、查看表、存储程序、用户自定义函数等数据库对象的控制权。由 GRANT 和 REVOKE 两个指令组成。可能有小伙伴会说, 请说人话。给各位总结下哈，DCL其实就是MySQL权限控制的一系列SQL语句。下面我们就一起来试一试DCL语句的各种操作吧。查询用户：USE mysql;
2025-01-07 18:22:33
918
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人