小秀的博客

原创 【Vue】provide 和 inject 实现原理

provide和inject的核心原理可概括为：​​通过组件树的链式依赖查找实现数据注入，并依赖 Proxy 的响应式机制保障数据同步​​。其设计平衡了灵活性与性能，成为 Vue 生态中跨层级通信的优雅解决方案。开发者需根据场景合理选择响应式数据类型，并注意作用域边界以避免副作用。

原创 【Vue】将响应式对象转为非响应式对象

标记对象或属性，使其即使被嵌套在响应式对象中也不会转换为 Proxy。标记，跳过响应式转换。因此，合理使用这些 API 能精准控制响应式边界。：响应式依赖通过属性访问触发追踪，直接解构或赋值会破坏引用链。创建的代理对象的原始数据副本，解除响应式追踪。：通过重新赋值整个对象来“重置”响应式状态。基于 Proxy 实现，而。属性获取原始数据，而。从 Vue3 源码看，

原创 【CSS】九宫格布局

repeat(3, 1fr) 表示三列等宽 1fr 表示一列的宽度。grid-template-columns 设置列宽。需处理元素间的默认空白间隙，适合需要行内特性的复杂组合。需手动计算容器宽度并清除浮动，适用于老旧浏览器环境。/* 行列间距统一 */

原创 自动获取新版本 js 静态文件

代码里有静态js文件，发布一个版本1.0在真实环境，再修改重新发布2.0，用户如何得到新版本？• 用户无感知自动更新：旧版本文件仍保留在服务器，新版本通过新哈希文件名触发请求。属性：明确告知浏览器文件内容永久不变，避免重复验证（需配合哈希文件名使用）。• 注意：需手动更新版本号，且部分浏览器可能缓存带参数的URL（需配合。根据文件内容生成哈希，内容不变时哈希值不变，最大化利用缓存。• 自动加载带新哈希的文件，旧用户逐步过渡到新版本。• 协商缓存补充：对无哈希的普通文件使用。头，确保内容变化后触发更新。

原创 【React Native】快速入门

对于移动端应用来说，开发 Android 应用使用的语言有 java 和 kotlin，开发 ios 应用使用的语言有 obj-c 和 Swift。因此，我们使用 react-native 编写一套代码进行跨端开发。这里还有一个问题，可能报错：Uncaught Error: java.io.OException: Failed to downloadremote update。然后通过 npm start 启动项目，看到二维码使用 expo go 扫描即可构建启动项目。

原创 【Vite】静态资源的动态访问

new URL和是较优解，前者适合简单场景，后者适用于批量处理。若对文件指纹无要求，可短期使用public目录方案，但需权衡缓存问题。

原创 【VSCode】快捷键合集（持续更新~）

在点击位置添加新光标，支持同时编辑多处。：选中下一个匹配的单词，批量修改同名变量。执行任意命令（如切换主题、扩展功能）。：全局搜索符号（如类名、方法名）。：格式化整个文档，统一代码风格。：按文件名模糊搜索并打开文件。：拆分编辑器窗口（多列显示）。：跳转到变量/函数的定义处。（单步进入）：逐行调试代码。：显示/隐藏左侧资源管理器。：快速切换已打开的文件标签。：向上/向下移动当前行。：向上/向下复制当前行。：全局搜索所有文件内容。：显示/隐藏集成终端。：输入行号直接跳转。

原创 【VSCode】修改侧边文件资源管理器中的文件夹折叠模式

默认为紧凑模式：

原创 【VSCode】这些设置让你的 VSCode 操作更加得心应手

【代码】【VSCode】这些设置让你的 VSCode 操作更加得心应手。

原创 【Umi】项目初始化配置和用户权限

【代码】【Umi】项目初始化配置和用户权限。

原创 【微信小程序】一套代码多端渲染原理

• 逻辑层（JS线程）：运行JavaScript代码处理业务逻辑和数据，使用独立的JS引擎（iOS为JavaScriptCore，Android为V8），与视图层完全隔离，避免阻塞渲染。• 视图层（WebView线程）：负责渲染WXML/WXSS，使用WebView组件实现页面布局和样式，不直接操作DOM，而是通过虚拟DOM进行差异比对更新。• 小程序将WXML转换为虚拟DOM树，逻辑层数据变更时生成新虚拟DOM，通过Diff算法比对差异后仅更新变化部分，减少渲染开销。• 缓存策略：预加载常用资源，利用。

原创 【算法】版本号排序

• 语义化版本：优先比较主版本号（Major），其次次版本号（Minor），最后修订号（Patch）对版本号数组进行排序，比如：[0.1.2.3，1.2.1.0，4.2.1.0，0.1.2.0]将版本号拆分为数字数组，逐个比较每个子版本段。逐位比较直到找到差异点，时间复杂度为 O(n)转换为数值类型，避免字符串比较错误（如。），最多可处理 10^3 量级的子版本号。处理长度不一致的版本号，如。，自定义非数字部分的排序规则。支持任意长度的版本号（如。• 预发布版本：拆分。

原创 【CSS】使用 CSS 绘制三角形

原理：通过设置元素的宽高为 0，利用透明边框相交形成三角形。• 优点：支持任意形状，容器可添加内容，响应式自适应。• 缺点：低版本浏览器兼容性差（如 IE 不支持）• 优点：兼容性极佳（包括 IE8+），代码简单。• 优点：支持复杂渐变效果，容器保留原有尺寸。• 等边三角形：需计算边框宽度比例（如底边。• 缺点：实现复杂度高，需调试角度和断点。• 缺点：无法在三角形内部添加内容。• 方向控制：调整坐标点顺序（如。• 缺点：依赖字体库，样式控制有限。• 方向控制：调整渐变角度（如。

原创 【VSCode】VSCode 自动去掉无效 import 导入

或者直接使用 shift+alt+o 手动格式化。打开settings.json后 加入。就会在保存后进行import格式化。

原创 首屏优化实现

• 核心指标监控：关注FCP（首次内容渲染）、LCP（最大内容渲染）、CLS（布局偏移）等Web Vitals指标。• CSS/JS压缩：使用工具（如UglifyJS、Terser）去除空格、注释，混淆变量名，减少文件体积。• 优化响应时间：升级服务器硬件、优化数据库查询，减少TTFB（Time to First Byte）。• 服务端渲染（SSR）：通过Next.js、Nuxt.js在服务器生成HTML，减少客户端渲染耗时。• 预渲染：对静态页面生成HTML快照，缩短首屏渲染时间。

原创 高级下拉选择框组件封装

历时一个月（没错，我比较菜，进度较慢，但80%工作都是我做的，而且同时还在改其他bug，做其他需求），我们终于把这个组件做出来了。因为，我和我的导师决定封装一个高级下拉选择框组件，来替换到之前公司所有普通下拉框。

原创 Token 安全性

攻击者通过 XSS 攻击注入恶意脚本窃取客户端 Token，或利用网络嗅探截获未加密的 Token（常见于 HTTP 协议环境）。若 Token 未采用签名或加密（如 JWT 未签名），攻击者可伪造合法 Token 或篡改已有 Token 的权限字段（如提升用户角色）。• 短有效期与刷新机制：访问 Token 有效期建议设为 15-60 分钟，搭配刷新 Token（长期有效但限制使用频率）实现无感续期。• 防重放机制：在 Token 中添加时间戳（Timestamp）或一次性随机数（Nonce）。

原创 【JavaScript】JavaScript实现大数相乘

在 JavaScript 中处理大数相乘时，由于 Number 类型存在精度限制（最大安全整数为 2⁵³-1），需要特殊处理。

原创 下拉框加载更多

通过判断滚动条位置是否接近容器底部，触发数据加载逻辑。• 浏览器原生API，性能优于滚动事件监听。为触发加载的阈值，通常设为5-10px）仅渲染可视区域内容，适合万级数据场景（如。• 分页参数管理（page/size）• 自定义指令监听下拉框滚动。• 滚动事件节流（如用。

原创 【JavaScript】原生 JavaScript 实现 localStorage 过期时间

【代码】【JavaScript】原生 JavaScript 实现 localStorage 过期时间。

原创 【Bug】多文件上传只有最后一个loading会关闭

的调用) 会在当前的同步代码执行完毕、所有微任务 (Microtasks, 如 Promise 的。多文件上传，只有最后一个loading 会关闭，其他 loading 会一直为 true。调用会非常密集地发生，几乎在同一个事件循环的“tick”内或者连续的微任务中执行。（宏任务 vs 微任务/同步任务），这会影响到 Ant Design Vue 的。) 执行完毕之后，并且在浏览器下一次事件循环的宏任务阶段才会被取出执行。被调用时，组件会找到对应的文件对象并更新其状态。调用都被分散到不同的宏任务中执行。

原创 【Git】合并和变基的区别

• 变基：重写提交哈希值（Commit Hash），若已推送到远程分支，可能导致他人本地仓库混乱。创建一个新的合并提交（Merge Commit），保留所有原始提交的分叉结构。• 合并：一次性解决所有冲突，生成一个合并提交。将当前分支的提交逐个“重放”到目标分支的最新提交后，形成线性历史。• 历史追溯：需明确查看分支合并时间和内容（如 Bug 修复回溯）。• 个人开发：整理本地提交历史，保持线性记录（如压缩临时提交。• 合并：保留完整历史，适合多人协作的公共分支（如。），适合需要精细化处理提交历史的场景。

原创 【Vue】Composables 和 Utils 区别

与框架无关，可以是纯 JavaScript/TypeScript 函数，适用于任何技术栈（如 React、原生 JS）。用于处理无状态的纯逻辑，如数据格式化、数组操作等。强调逻辑的组合性，通过函数返回值暴露状态和方法，支持按需组合多个功能模块。），适用于 Vue 组件内部复用逻辑，且每个组件实例会创建独立的状态。用于封装有状态的逻辑，通常结合 Vue 的响应式 API（如。• 需要响应式状态管理的场景（如 API 请求、事件监听）。），类型支持取决于具体实现，不强制依赖 Vue 的类型系统。

原创 a-range-picker 格式化 M2 为正确日期格式

在 Vue 项目中，使用 a-range-picker 组件选择日期范围时，value 是一个满足 dayjs 规则的数组。为了将选择的日期格式化为正确的日期格式，可以通过以下步骤处理：首先检查 item.operationValue 是否为数组，如果是，则遍历数组中的每个日期对象，使用 dayjs 将其格式化为 YYYY-MM-DD 格式。如果日期为空，则显示为“不限”。最终将格式化后的日期拼接为“开始日期 至 结束日期”的字符串。这种方法确保了日期范围的正确显示和处理。

原创 【JavaScript】将字符串转为base64

若密码仅包含 ASCII 字符（如英文、数字、常见符号），可直接使用原生函数。将字符转为 UTF-8 字节序列，再通过正则替换为二进制格式。默认使用 UTF-8 编码，可直接处理多字节字符。优势：支持 URL 安全模式、自动填充等高级功能。优势：直接处理二进制数据，无需手动替换字符。适用场景：URL 参数、文件名存储等。在 Node.js 中需使用。处理中文或特殊符号会报错。API（现代浏览器）

原创 【Sequelize】关联模型和孤儿记录

• 单边定义会导致预加载失效。例如仅定义。

原创 【JavaScript】不使用框架路由进行页面跳转

通过 JavaScript 创建隐藏的。

原创 【uni-app】[plugin:vite:vue] At least one ＜template＞ or ＜script＞ is required in a single file componen

之前在vite.config.ts文件的plugins同时配置了uni()和vue()，注释掉vue()后就好了。

原创 【微信开发者工具】解决微信开发工具的调试器加载错误，从任务栏打开工具可能导致该问题，请不要从任务栏启动工具

问题提示： 微信开发工具的调试器加载错误，从任务栏打开工具可能导致该问题，请不要从任务栏启动工具。调试器控制台显示为空，刷新出不来。解决方法很简单：我们只需要将微信开发者工具从底部任务栏取消固定就可以了。然后关闭重新打开即可。

原创 【uni-app】axios 报错：Error: Adapter ‘http‘ is not available in the build

在 uni-app 中使用 axios 会报错：Error: Adapter ‘http‘ is not available in the build。解决方法：为 axios 添加 adapter 适配器。

原创 【uni-app】页面跳转传参

通过 navigateTo 的。

原创 【Sequelize】迁移和种子

在 migrations 文件夹中创建了一个名字像 XXXXXXXXXXXXXX-create-user.js 的迁移文件.在 models 文件夹中创建了一个 user 模型文件;根据自己的情况做修改（比如中国时区需要+8）：数据库连接配置（开发/测试/生产环境）使用事务添加字段，确保操作原子性。定义回滚操作（删除字段）（时间戳前缀保证执行顺序）：按文件名时间戳顺序执行。

原创 使用 Docker 运行 MySQL

如果没有正在运行的容器，该端口可能被机器上的非 Docker 进程使用。4.然后系统自动进行Windows命令处理，我们等待处理完成以后（大约等待一分钟），在最末处输入：Y，电脑自动重启，进行配置更新。安装 docker desktop ：https://www.docker.com/get-started/。2.桌面上，我们找到并右键点击【Hyper-V.cmd】文件图标，在右键菜单中点击：以管理员身份运行。3.然后弹出一个 用户帐户控制 - Windows命令处理程序 对话框，我们点击：是。

原创 【已解决】Webstorm 每次使用 git pull/push 都要输入令牌/密码登录

解决办法：勾上【使用凭据帮助程序】（英文：Use credential helper）

原创 【Git】git 操作远程仓库命令超时报错

在使用 Git 进行远程仓库操作时，如 clone、push 或 pull，可能会遇到 443 端口超时的问题，尽管 ping github.com 是通的。这通常与代理设置有关。为了解决这个问题，可以通过设置 Git 的 https.proxy 和 `http.proxy

原创 Mixed Content: The page at https://xxx was loaded over HTTPS

Mixed Content 警告是由于 HTTPS 页面中引用了 HTTP 协议的资源（如脚本、图片、iframe 等），导致浏览器因安全策略阻止加载这些非加密内容。HTTP 资源可能被中间人攻击篡改，破坏 HTTPS 页面的整体安全性。若 HTTPS 由代理服务器（如 Nginx、F5）终止，需传递。检查代码中所有静态资源（如图片、CSS、JS）的 URL，将。：优先将自有资源升级到 HTTPS，避免混合内容风险。，后端服务据此生成资源链接。限制资源加载范围（如。：确保反向代理正确传递。

原创 【Git】“warning: LF will be replaced by CRLF”的解决办法

Git 检测到本地文件的换行符与仓库设置或目标平台不兼容时，会触发此警告。：若项目仅在同一平台开发（如纯 Windows），可完全禁用转换。：确保开发工具与 Git 设置一致（如 VS Code 可设置。：通过编辑器（如 VS Code）手动设置文件换行符为。可能导致仓库混用换行符，引发更多兼容性问题。换行符的文件时，Git 会自动将其转换为。，以确保文件在本地的正常显示。，但检出时不修改换行符（保持。：确保代码库中换行符的一致性。：若跨平台协作，建议通过。（Windows 用户）。，保持本地文件兼容性。

原创 为 IDEA 设置管理员权限

原创 微前端 - 以无界为例

切换页面时保留子应用状态，避免重复渲染。：主应用负责路由管理和子应用容器渲染。：适配无界生命周期，接收主应用传递的。：实现 JS 执行环境的完全隔离。传递和事件总线机制。：天然支持样式隔离。

原创 【Vue】Vue 中使用 UnoCSS 插件

动态规则支持通过正则表达式生成响应式样式（如。