- 博客(456)
- 收藏
- 关注
RSS订阅原创 刷新后列表“穿越“了？聊聊前端最容易被忽视的异步竞态
前端异步竞态常导致列表“穿越”：筛选后数据被旧请求覆盖。根源在于请求返回顺序与发起顺序无关。解决方案是为每次请求分配唯一序列号，仅最新号可更新状态，过期请求自动丢弃。配合重置时递增序列号，彻底阻断竞态。关键细节：丢包不改loading、避免重复请求。适用于分页、筛选、onShow刷新等场景。
2026-09-22 15:37:08
219
原创 CSS 图标换色指南：用 brightness / invert / mask 把任意图片改成想要的颜色
本文系统讲解了用CSS实现图标变色的多种技巧：通过brightness(0) invert(1)实现深色背景下图标变白；brightness(0)或结合opacity实现变黑/深灰；grayscale(1)用于禁用态；而精确变色推荐使用mask配合background-color，支持渐变与动画。同时对比了drop-shadow与box-shadow在图形投影上的差异，强调透明底PNG/SVG的重要性，并提醒性能与兼容性注意事项。最终给出选型建议：简单变色用filter，精准可控用mask，动态随色用SVG
2026-09-20 15:50:18
506
原创 别乱装“电脑加速神器“了：一份 17 步全自动、可恢复的 Windows 清理优化脚本
<think>我们根据要求生成≤150字的文章摘要。内容是关于一个Windows清理优化脚本。摘要需简洁，涵盖主要功能和使用方式。 摘要草稿： 这是一个安全可复用的Windows系统清理优化脚本，以.bat批处理实现。双击自动提权，执行14步清理：临时文件、回收站、更新缓存、浏览器缓存、事件日志等，并做性能优化（电源计划、视觉特效、自启动项）。仅处理临时/缓存/已丢弃文件，不碰个人文档。附完整代码与创建方法，小白可操作，可反复运行。 字数检查：约100字。符合。</think>一个安全可复用的Windows
2026-09-09 10:01:00
406
原创 gitee码云删除仓库教程
<think>我们只需要根据内容生成摘要，字数≤150字。内容是关于删除Gitee仓库的步骤。摘要要简洁。</think>本文介绍了删除Gitee仓库的步骤：进入个人主页，选择仓库，进入目标仓库后点击“管理”，再点击“删除仓库”即可完成操作。
2026-09-04 10:32:15
306
原创 同一个 Git 项目整出两份，切分支互不影响？两种方案实测
本文介绍了两种实现Git项目多分支并行开发的方法： git worktree（推荐） 共享对象数据库，节省磁盘空间 每个工作目录独立检出分支，互不影响 核心命令：add添加目录、list查看、remove删除 注意点：同一分支不能同时检出，需独立安装依赖 双clone方案 完全隔离两份仓库，自由切换分支 适合需要彻底隔离的场景，但占用双倍磁盘 克隆后需手动创建跟踪分支 对比建议： 常规多分支开发用git worktree 需完全隔离或同分支修改时用双clone 推荐目录命名体现用途，方便区分 两种方案均附详
2026-08-12 15:37:37
328
原创 为什么 Flex 布局里的文字省略号总是不显示？
摘要 Flex 布局中文字省略号不显示的核心原因是 Flex 子项默认 min-width: auto 会阻止内容压缩。解决方法是为需要截断的 Flex 子项添加 min-width: 0，覆盖默认行为，允许内容被压缩。多层嵌套时，每一层需要截断的 Flex 子项都要设置。关键代码示例如下： .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 口诀：Flex 子项要
2026-07-02 12:22:38
259
原创 记一次 uni-app开发微信小程序 textarea 的“伪遮挡”踩坑实录
在小程序开发中，textarea组件默认层级过高会导致与固定定位按钮重叠的问题。解决方法是通过调整z-index层级：为按钮设置position:fixed和较高的z-index值(如999)，同时为textarea添加position:relative和较低的z-index值(如0)。这种层级调整可确保按钮始终显示在输入框上方，避免元素覆盖问题。文中还提供了具体的CSS代码示例和最终效果截图。
2026-03-27 09:15:29
347
原创 Pinia的基本使用和踩坑指南
Pinia的组合式Store写法采用Vue3的setup语法风格，通过defineStore定义包含响应式状态(state)、计算属性(getters)和方法(actions)的Store。使用ref定义响应式状态，computed定义计算属性，普通函数定义方法，最后返回需要在组件中使用的属性和方法。在组件中使用时，通过storeToRefs保持解构后的响应性，而actions可直接解构。这种写法优势在于逻辑复用、代码组织和灵活使用组合式API，但需注意必须显式返回、正确解构和避免循环依赖。ref用于Sto
2026-02-14 10:26:25
860
原创 详解Vue2和Vue3的变化
Vue 3 对 Vue 2 进行了全面重构，带来多项核心改进：响应式系统改用 Proxy 替代 Object.defineProperty，解决了动态属性监听问题；引入 Composition API 优化代码组织；原生支持 TypeScript；性能提升包括虚拟 DOM 重写和 Tree Shaking；新增 Fragment、Teleport 等特性；全局 API 改为模块化设计；推荐使用 Vite 构建工具和 Pinia 状态管理。Vue 3 在性能、开发体验和类型安全方面均有显著提升，成为现代前端开
2026-02-12 11:17:07
456
原创 详解Vue3的自定义 Hooks
Vue 3 自定义 Hooks（组合式函数）是基于 Composition API 的核心实践，用于封装响应式逻辑并实现跨组件复用。它通过函数形式将状态、计算属性和方法封装起来，解决了 Vue 2 Mixin 的命名冲突和来源不清问题。典型应用包括状态管理（如计数器）和副作用处理（如鼠标位置追踪）。相比 Mixin，自定义 Hooks 具有更清晰的逻辑组织、更好的类型支持和无命名冲突等优势。最佳实践包括参数传递、返回对象、副作用清理和结合 TypeScript。自定义 Hooks 体现了代码分离思想，适合在
2026-02-12 11:12:49
565
原创 Vue 3 新增内置组件详解与实战
Vue 3 新增了三个核心内置组件：Fragment 允许多根节点模板，减少冗余DOM层级；Teleport 实现组件内容跨DOM定位，解决模态框层级问题；Suspense 提供异步组件加载状态管理，优化用户体验。这些组件增强了开发灵活性，解决了Vue 2中的常见痛点，使应用结构更清晰、交互更流畅。掌握这些组件能显著提升Vue 3开发效率和应用质量。
2026-02-12 11:09:55
304
原创 Vue 3 的组合式 API（Composition API）优势
Vue 3的组合式API相比选项式API具有显著优势：1) 逻辑聚合功能，解决代码碎片化问题，使业务逻辑更易维护；2) 提供Composables机制，通过函数封装实现逻辑复用，避免了Mixin的命名冲突问题；3) 天然支持TypeScript，无需处理this上下文，类型推断更准确；4) 工程化优势明显，支持Tree-shaking和更好的代码压缩。组合式API特别适合大型复杂项目和TypeScript开发，而简单组件仍可使用选项式API。
2026-02-12 11:08:42
592
原创 详解Vue3的provide和inject
Vue 3 中的 provide 和 inject API 提供了一种高效的跨层级组件通信方案，通过依赖注入模式解决了属性透传问题。provide 由祖先组件定义数据或方法，inject 允许子孙组件直接获取这些内容，无论层级多深。使用时需注意响应式原理：提供 ref 或 reactive 对象可保持响应性，而普通值会失去响应能力。最佳实践包括使用 Symbol 避免命名冲突、避免直接修改数据以维护单向数据流。该方案特别适用于深层组件通信、高阶组件开发和局部状态共享场景，是构建复杂应用的利器。
2026-02-12 11:06:07
641
原创 详解Vue3的toRaw和markRaw
toRaw和markRaw是Vue3 Composition API中两个控制响应式系统的底层工具。toRaw用于获取响应式对象的原始数据，修改原始数据不会触发视图更新，常用于与第三方库集成；markRaw则预先标记对象使其永远不会被转为响应式，适用于常量或复杂实例等不需要响应式的场景。两者主要区别在于作用时机：toRaw作用于已响应式对象，markRaw作用于即将响应式化的对象。虽然能优化性能，但应谨慎使用以避免破坏Vue的响应式特性。
2026-02-12 11:01:59
674
原创 “解构”与“响应”的博弈——深入剖析 Vue 3 的 toRef 与 toRefs
Vue 3 的 toRef 和 toRefs 解决了 reactive 对象解构时丢失响应性的问题。toRef 转换单个属性为 ref 对象，保持与原属性的双向同步；toRefs 批量转换所有属性，适合组合式函数返回和模板解构使用。两者都能保留响应式连接，区别在于处理范围：toRef 针对特定属性，toRefs 处理整个对象。它们是安全解构 reactive 对象的必备工具。
2026-02-12 10:57:53
631
原创 深入理解 Vue 3 的 watchEffect
Vue 3 的 watchEffect 是一个自动追踪依赖的响应式 API，能立即执行副作用函数并在依赖变化时重新执行。它通过自动收集响应式数据依赖简化了代码，特别适合处理异步请求、防抖等场景。关键特性包括自动依赖追踪、立即执行机制以及通过 onCleanup 进行副作用清理。相比 watch，watchEffect 更适用于"数据变化就重新执行"的简单场景，而 watch 更适合需要明确数据源和旧/新值对比的复杂逻辑。开发者可根据具体需求选择使用。
2026-02-12 10:53:42
585
原创 深入 Vue 3 computed：原理、实战与避坑指南
摘要： Vue 3的computed属性是响应式系统的核心功能，通过缓存机制和依赖追踪实现高效数据派生。与methods相比，computed仅在依赖变化时重新计算，适合模板逻辑和复杂数据处理。支持读写控制（get/set），可简化表单绑定和嵌套对象操作。常见误区包括异步操作、直接修改返回值或依赖非响应式数据，正确方案是结合watch或确保数据响应式。与watch和methods相比，computed更适用于声明式数据派生，而非副作用处理或事件响应。合理使用能显著提升性能与代码可维护性。
2026-02-12 10:46:49
630
原创 Vue 3 生命周期深度解析：从 Options API 到 Composition API 的完整指南
Vue 3生命周期在Composition API中发生了显著变化：setup()取代了Vue 2的beforeCreate和created钩子，成为初始化入口；生命周期函数改为onXxx形式（如onMounted）；销毁相关钩子更名为unmount。关键区别在于：1）setup在实例创建前执行，this不可用；2）onMounted最常用，用于DOM操作和数据请求；3）资源清理应在onBeforeUnmount中进行。代码示例展示了如何在<script setup>中使用响应式数据和生命周期钩
2026-02-11 18:30:25
552
原创 Vue 3 响应式原理深度解析
Vue 3响应式系统通过Proxy和Reflect实现数据驱动视图的自动更新。相比Vue 2的Object.defineProperty，Proxy可以完整拦截对象所有操作，支持动态增删属性和数组变化监听，性能更优且支持Map/Set等数据结构。其核心流程包括创建代理、依赖收集、触发更新和重新执行。对于基本数据类型，使用ref包装成对象再通过reactive处理。Vue 3的响应式机制解决了Vue 2的诸多限制，使代码更简洁、性能更强，为现代前端开发提供了坚实基础。
2026-02-11 18:04:13
775
原创 Vue3 响应式核心：ref与reactive全方位对比及实战指南
本文深入解析Vue 3 Composition API中ref与reactive的核心区别：ref适用于所有数据类型，需通过.value访问，而reactive仅适用于引用类型，可直接访问属性。重点对比了两者在解构响应性、整体替换等场景的差异，指出reactive解构会丢失响应性且无法整体替换对象，而ref则更灵活。最后给出最佳实践建议：基本类型用ref，不需替换的对象用reactive，需要解构时使用toRefs。掌握这些差异能显著提升Vue开发效率。
2026-02-11 14:35:52
1384
原创 Vue 3 的setup函数与 ＜script setup＞语法糖
Vue 3 的setup函数与 <script setup>语法糖：剥开表象，直击底层原理
2026-02-11 11:33:15
977
原创 var声明的问题总结
本文分析了JavaScript中var声明的作用域问题及其引发的常见错误。首先指出var是函数作用域，导致变量可在函数内任意位置访问，容易造成变量覆盖等问题。其次重点讲解了setTimeout在循环中使用var声明时，由于异步执行特性会输出相同值的现象，并提供了两种解决方案：1)使用let声明变量，利用块级作用域特性；2)使用IIFE创建闭包捕获每次循环的值。这些解决方案能有效避免var作用域带来的问题，确保代码按预期执行。
2026-02-11 11:09:15
87
原创 推送代码到gitee，弹出身份验证窗口，但是输入gitee账号密码，提示认证失败
Gitee身份认证失败问题解决方案：自2021年起Gitee不再支持账号密码直接认证，必须使用个人访问令牌(Personal Access Token)进行验证。解决方法为：登录Gitee账户，在「设置」→「安全设置」→「个人访问令牌」中生成具有仓库权限的Token，在认证窗口输入此Token而非登录密码。注意将Token设置为永久有效并妥善保存，以备后续验证使用。Git配置的用户名和邮箱仅用于标识提交者身份，与远程仓库认证无关。
2026-02-10 15:17:11
958
原创 vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器
摘要：该代码实现了一个拖放功能，A容器中的字段列表项可被拖拽到B容器中。A容器使用v-for渲染字段列表，每个字段项可拖拽并传递字段数据。B容器作为放置区域，接收拖拽的字段数据并检查是否已存在，不存在则添加到条件列表中。通过dataTransfer对象在拖放过程中传递数据类型和字段信息。
2026-02-05 17:27:32
124
原创 Git删除远程分支+本地分支
Git分支删除操作指南 删除远程分支：git push origin --delete <分支名> 删除本地分支： 安全删除(已合并)：git branch -d <分支名> 强制删除(未合并)：git branch -D <分支名> 注意：强制删除不可恢复，需谨慎操作。
2026-01-21 13:43:42
276
原创 从零开始创建一个Vue2项目
Vue CLI是一个快速创建vue工程化目录的工具，底层使用的是webpack，webpack是一个打包工具，它的职能就是把vue的语法，最终打包成js css 和html，后面还会学到vite打包工具，更先进，vue3项目一般就不会使用 Vue CLI构建了，因为只要使用Vue CLI，底层就还是webpack打包工具，一般vue3我们还是更倾向于vite打包工具，这是后话。下载包默认是从外网下载的，速度很慢，所以要设置国内镜像源，下载速度就很快了。选择如下，按空格键选择，按上下键调序，按回车。
2026-01-15 12:16:03
924
原创 前端js高频面试点汇总
本文汇总了JavaScript核心知识，涵盖语言基础、运行机制和性能优化等方面。主要内容包括：JavaScript与Node.js的关系及运行环境；语言组成（ECMAScript、DOM、BOM）；变量声明(var/let/const区别)、数据类型及判断方法；函数、原型链和this指向等面向对象特性；程序执行机制（事件循环、任务队列）；性能优化技巧（防抖节流、减少重排重绘）；以及内存管理（垃圾回收）和对象操作（深浅拷贝、属性定义）。全面解析了JavaScript从基础语法到高级特性的关键概念，适合系统学习
2026-01-14 13:59:23
275
原创 uniapp开发微信小程序发布提示包超过大小解决办法
小程序开发中遇到超包问题，可在模拟器中勾选"运行时压缩"选项解决大部分体积超限情况。该功能能有效减小包体积，但若原始包体过大仍需采用分包方案。操作步骤简单，如图所示在开发工具设置中启用该选项即可。此方法适用于轻度超包情况，为开发者提供了便捷的解决方案。
2025-12-30 17:27:50
291
原创 解决el-table设置fixed固定列后下方文字没有盖住的情况
摘要： 解决el-table设置fixed固定列后文字显示异常的问题。当使用scoped样式时，需配合/deep/或::v-deep选择器。解决方法是为固定列元素添加z-index:10和背景色，确保覆盖下方内容。代码示例展示了如何通过CSS调整el-table固定列的层级和背景样式。
2025-11-20 17:03:22
574
2
原创 uinapp开发小程序实现按钮拖拽和吸顶效果
该代码实现了一个可拖拽悬浮按钮组件(GSwitchButton)，具有以下功能： 按钮可自由拖动并自动吸附到屏幕左右两侧 拖动过程中限制更新频率保证60fps流畅度 按钮位置会持久化存储到Vuex状态管理中 根据当前状态显示"切换养老服务"或"切换救助服务"文字 实现了完整的触摸事件处理(touchstart/move/end) 考虑了不同屏幕尺寸适配和rpx单位转换 包含边界检测确保按钮不会移出屏幕外 组件使用了cover-view和cover-image来保证在原
2025-11-20 15:07:47
410
原创 微信小程序在web-view页面添加按钮
摘要 本文介绍了在小程序中使用web-view组件时添加悬浮按钮的实现方法。通过嵌套cover-view标签可以在web-view页面上创建悬浮工具栏，需要注意：1）需要绝对定位和高z-index值；2）开发者工具中不显示效果，需真机测试；3）使用setTimeout延迟显示兼容低端手机；4）url必须配置域名白名单才能上线展示。示例代码展示了如何解码URL参数并实现延迟1秒显示悬浮工具栏的效果。
2025-11-20 11:48:48
535
3
原创 git如何根据某一个开发节点拉取一个新分支
本文介绍了基于特定提交节点创建并推送新分支的完整流程。首先提供了两种获取开发节点ID的方法：通过编辑器源码管理界面查看（推荐）或使用git log命令。其次详细说明了通过节点ID创建新分支的git命令操作。最后给出了两种推送新分支到远程仓库的方式，既支持编辑器图形化操作，也提供了对应的git push命令行方法。整个过程覆盖了从节点查找、分支创建到远程推送的全链路操作指南。
2025-11-19 11:07:24
503
原创 Win11开启电源高性能模式和卓越性能模式
本文介绍了在Windows系统中调整电源性能模式的步骤：1）通过快捷键Win+x打开管理员终端；2）使用powercfg命令激活高性能模式（代码8c5e7fda）或卓越性能模式（代码e9a42b02）；3）在控制面板的电源选项中选择相应模式。文章特别提示卓越性能模式可能不兼容家庭版系统，并配有详细的操作截图指引。该教程适合需要提升电脑性能的专业用户参考。
2025-11-12 14:38:50
20712
原创 VSCode 关闭abc提示或者调整顺序
摘要：文章介绍了如何调整VS Code中代码片段提示的优先级。首先通过修改editor.snippetSuggestions设置为top，将自定义片段提示置顶。然后详细说明了各选项含义：top(插件置顶)、bottom(abc置顶)、inline(随机排序)、none(仅显示abc)。最后给出了彻底关闭abc提示的方法：在设置中搜索并关闭Show Word选项。这些调整可以优化代码片段的使用体验。
2025-11-06 14:13:48
546
原创 Uniapp微信小程序分享功能全解析，分享给朋友 or 群聊 or 朋友圈
摘要：本文介绍了在uni-app中实现微信小程序分享功能的方法。包括两种分享方式：1）分享给朋友或群聊，需配置enableShareAppMessage并自定义onShareAppMessage生命周期；2）分享到朋友圈，需配置onShareTimeline生命周期。文章详细说明了如何通过右上角菜单和自定义按钮触发分享，并展示了如何根据不同来源设置不同的分享标题和封面图片。还提供了分享成功/失败的回调处理示例。配置参数包括标题、路径、查询参数和图片地址等关键信息。
2025-11-04 16:16:51
1112
原创 uniapp开发微信小程序【Vue3+setup地图map动态获取缩放比scale】
本文介绍了在uni-app中使用uni.createMapContext创建地图上下文对象时需要注意的关键点：必须传入componentInstance参数，否则回调函数不会执行。文章提供了一个完整的地图组件示例代码，包含地图初始化、标记点计算和区域变化处理等功能。组件通过getCurrentInstance()获取当前组件实例并传递给地图API，确保回调函数正常工作。示例还展示了如何动态计算标记点数据、处理地图缩放事件以及获取当前缩放比例等实用功能。
2025-10-17 09:57:28
583
原创 Vue Router深入掌握 push, replace, go, back, forward,beforeEach 方法
本文详细介绍了Vue Router中的五种编程式导航方法： router.push()：最常用的导航方法，会向历史记录添加新条目，可传递路径、命名路由或参数，支持Promise处理。 router.replace()：与push类似但会替换当前历史记录，适用于表单提交等不需要返回的场景。 router.go(n)：在历史记录中前进/后退指定步数，正数前进，负数后退。 router.back()：router.go(-1)的语法糖，实现后退功能。 router.forward()：router.go(1)的语
2025-09-08 11:09:28
1413
原创 vue2的render函数详解
Vue 2中的render函数提供了一种更灵活的创建虚拟DOM的方式。它通过createElement函数（常用别名h）生成VNode节点，相比于模板编译具有更强编程能力，能处理异步请求等复杂场景。render函数包含三个参数：标签/组件、属性对象和子节点数组。需要注意的是，render函数和template标签不能同时使用，template的优先级更高。这种底层API方式让开发者能更精确控制组件渲染逻辑，适用于需要动态生成复杂DOM结构的场景。
2025-08-01 15:19:53
1032
原创 深入解析 JavaScript 函数的 length 属性与参数默认值的关系
JavaScript函数length属性表示显式声明且无默认值的参数个数。如f0(a,b,c)返回3，f1(a,b=1,c=2)返回1，f2(a,b=1,c)返回1，f3(a,...args)返回1，f4(a=1,b)返回0。该属性统计从第一个参数开始，到首个有默认值参数前的参数数量，剩余参数不计入。通过示例可清晰理解length属性的计算规则。
2025-08-01 14:26:12
324
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人