- 博客(23)
- 收藏
- 关注
RSS订阅原创 WebGPU：下一代 Web 图形与计算 API 实践指南
更高效的 CPU 使用率更好的多线程支持更直观的 API 设计支持计算着色器更精细的资源控制图形渲染 - 绘制彩色三角形通用计算 - 矩阵乘法图像处理 - 灰度转换WebGPU 的学习曲线相对陡峭，但其强大的功能和性能提升使得这一投入非常值得。随着生态系统的成熟，WebGPU 将成为 Web 高性能图形和计算的基石。
2025-07-02 17:38:32
381
原创 Vue2 打印文字效果实战
文字打印机效果虽然简单，但它融合了动画、响应式、组件设计等多个前端核心概念。掌握它不仅有助于理解 Vue 的响应式机制，也能帮助你在实际项目中提升用户体验。也欢迎继续关注我，我会带来更多实用的前端开发教程与实战案例。
2025-07-02 16:12:09
1899
原创 深入理解BFC：从前端小白的困惑到布局高手的蜕变
BFC就像CSS世界中的"平行宇宙"，它创造了一个独立的渲染空间，让里面的元素按照自己的规则布局，不受外界干扰。更好地控制布局解决常见的CSS问题（如高度塌陷、外边距合并等）深入理解CSS的渲染机制记住，前端开发不仅要会用框架，更要理解这些基础原理。当你遇到奇怪的布局问题时，BFC可能就是解决问题的金钥匙！"BFC不是魔法，但理解它能让你像魔法师一样解决布局问题！
2025-07-02 14:25:55
1897
原创 Vue高级技巧大揭秘
Vue的响应式系统本质上是观察者模式与数据劫持技术的结合。理解其核心原理后，开发者可以根据业务需求定制响应策略，针对不同数据结构选择最佳响应方案，甚至将响应式思想应用于其他技术栈。通过深入理解这些高阶技术，开发者可以真正将Vue的响应式能力转化为业务价值。欢迎在评论区交流你的深度实践案例！
2025-07-02 14:10:48
903
原创 使用 Prisma 实现数据库字段的动态迁移实践
Prisma 迁移基于版本控制，每次变更数据库结构都会生成一个新的迁移目录（位于该目录下的 SQL 文件记录了此次变更的具体操作。在开发阶段，我们使用生成并执行迁移；在生产环境中，推荐使用应用所有已存在的迁移文件。
2025-07-02 13:09:50
572
原创 Vue路由配置全攻略：从入门到精通不迷路！
今天咱们来聊聊Vue项目中最基础也最重要的部分——。别看路由配置简单，里面的门道可不少，搞不好就会踩坑。下面我就把我的经验全部分享给大家！1. 基础配置：创建你的第一条路由pathnamecomponent。
2025-07-02 13:05:41
381
原创 Vue路由守卫：给你的页面访问加把锁！
权限控制数据预取页面访问记录表单未保存提示等等...全局守卫处理通用逻辑路由独享守卫处理特定规则组件内守卫处理组件相关逻辑。
2025-07-02 12:58:38
337
原创 梳理三类vue组件之间的通信
props$attrs、插槽slot用于子访问父；emit、作用域插槽用于父访问子；v-model实现双向或跨层通信，灵活组合应对不同场景。
2025-07-02 12:35:55
239
原创 React：十年迭代与生态发展扫描
以下是React从 2015 年的v0.14到 2025 年的v19.1的十年演进全记录，结合核心版本特性、社区生态发展及实际弊端，系统性总结其技术演进脉络（持续更新。
2025-07-02 12:32:15
1826
原创 React Hooks 和自定义 Hooks 的概念和使用方法
自定义 Hooks 是封装可复用逻辑的函数，必须以use开头。代码复用将通用逻辑提取到自定义 Hook 中多个组件可以共享相同的逻辑减少重复代码让函数组件拥有状态和生命周期自定义 Hooks让逻辑复用变得简单项目中的 Hooks展示了实际业务场景的应用遵循使用规则确保 Hooks 正常工作通过合理使用 Hooks，可以写出更简洁、可维护的 React 代码！
2025-07-02 12:28:53
379
原创 Vue项目中评论发送表情功能的实现与问题解决总结
在开发音乐类Web项目时，评论区是用户互动的重要场景。为了提升用户体验，越来越多的产品支持在评论中插入表情（emoji）。如何优雅地集成表情选择器？如何让表情插入到光标处而不是总是追加到末尾？如何兼容移动端和PC端的输入体验？表情插入后，如何保证输入框光标位置的正确？下面结合实际开发过程，详细讲解表情评论功能的实现与常见问题的解决方案。评论发送表情功能的实现，既考验细节处理能力，也能提升产品体验。遇到问题时，建议多查阅官方文档和社区经验，善用 Web Components 及现代前端特性。
2025-07-01 18:49:52
650
原创 Vue3 中watch和computed
computed用于派生状态具有缓存机制适合数据转换和格式化模板中优先使用watch用于执行副作用提供精确控制适合异步操作、DOM操作需要显式声明依赖自动追踪依赖立即执行适合多个依赖的简单副作用提供清理机制黄金法则需要派生值→ 用computed需要响应变化执行操作→ 用watch或需要精确控制依赖→ 用watch需要自动追踪多个依赖→ 用避免在computed中产生副作用总是在副作用中清理资源。
2025-07-01 18:28:41
253
原创 为什么JavaScript的原始值可以调用方法？
当我们对一个原始值调用方法或访问属性时，JavaScript 会自动将其包装为对应的包装类型对象，执行完操作后，这个。这里创建的Boolean包装类型对象，在进行布尔转换时，结果为true，与我们预期的false不同，这是因为它是一个对象，而在 JavaScript 中，对象在布尔语境下被视为true。原始值包装类型是 JavaScript 语言中一个巧妙而重要的设计，它让原始数据类型也能拥有对象的行为，丰富了 JavaScript 的功能和表现力。，使得原始值也能拥有对象的特性，比如调用方法和访问属性。
2025-07-01 17:20:59
944
原创 vue3 如何做数据埋点
一般情况下，我们需要收集前端的异常，用于分析系统的各个方面的指标。以下我将分享我在工作中做数据埋点的简单思路。这套思路能够满足大部分的需求场景，希望大家可以一起来交流。
2025-07-01 15:38:40
383
原创 Nginx部署前端Vue项目
通过以上步骤，你的Vue.js项目已经优雅地跑在Nginx上，从打包、上传到配置HTTPS，全程丝滑！Nginx不仅是你的“超级服务员”，还是安全和性能的保障。细心配置：Nginx的每行配置都是“指令”，写错了服务员会“罢工”。安全第一：HTTPS是标配，小锁一亮，用户和老板都夸你靠谱。日志为王：遇到问题别抓瞎，日志里藏着真相。现在，端起奶茶，打开浏览器，看看你的Vue应用在云端闪耀吧！部署成功的感觉，就像吃到刚出炉的蛋糕，甜到飞起！
2025-07-01 15:31:34
1330
原创 JS中Object.defineProperty 详解
是 JavaScript 中一个强大的方法，用于直接在对象上定义新属性或修改现有属性，并返回该对象。它提供了对属性行为的精细控制。在 IE9+ 和所有现代浏览器中都支持，但在 IE8 中仅能用于 DOM 对象。注意：描述符不能同时是数据描述符和存取描述符（即不能同时有。属性描述符有两种主要类型：。
2025-07-01 15:16:53
525
原创 Vue3 defineModal ref reative 区别及适用场景
const [model, modifiers] = defineModel({ set(value) { if (modifiers.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1) } return value } })
2025-07-01 15:02:19
469
原创 Vue3+TypeScript实现装饰器模式
Vue3+TypeScript实现装饰器模式：电脑配置的动态升级术装饰器模式（Decorator Pattern）听起来是不是有点像“程序员在电脑组装店里给电脑加装炫酷配件”？它是一种结构型设计模式，让你像给电脑加装RGB灯条一样，在运行时动态为对象增添新功能，比继承灵活百倍！今天我们用Vue3和TypeScript，结合一个“电脑配置升级”的幽默例子，带你搞懂装饰器模式如何为电脑加装新配件，代码优雅又好玩，保证通俗易懂，笑中带学！一、装饰器模式是个啥？
2025-07-01 14:41:04
580
原创 Vue3+TypeScript实现外观模式
Vue3+TypeScript实现外观模式：电脑组装的一键解决方案外观模式（Facade Pattern）听起来是不是有点像“程序员在电脑组装店里推出了一键定制服务”？它是一种结构型设计模式，为复杂的子系统提供一个简单的高层接口，让客户像点外卖一样轻松搞定需求。今天我们用Vue3和TypeScript，结合一个“电脑组装流水线”的幽默例子，带你搞懂外观模式如何简化子系统操作，代码优雅又省心，保证通俗易懂，笑中带学！一、外观模式是个啥？
2025-07-01 14:39:44
714
原创 React Hooks 的优势和使用场景
Hooks 如 useMemo 和 useCallback 提供了细粒度的性能优化手段，可以避免不必要的渲染和计算。useContext 可以方便地访问 React 的 Context，避免了传统的 Consumer 组件嵌套。自定义 Hook 可以提取组件逻辑到可重用的函数中，解决了高阶组件和渲染属性带来的"嵌套地狱"问题。相比 class 组件，函数组件配合 Hooks 通常需要更少的代码量，同时保持了相同的功能。useReducer 适用于管理包含多个子值的复杂 state 逻辑。
2025-07-01 14:38:25
183
原创 React组件中按钮的loading状态失效问题解决
Ant Design 的大多数组件都支持受控模式，即其状态完全由你传入的 props 控制。因此，确保传入的 props 是最新且正确的，是使用这些组件的关键。状态，而其内部逻辑依赖于某些 props，那么如果这些 props 没有变化，Hook 返回的状态也可能不变。中引用状态变量时，如果不更新依赖项，就会导致函数体中使用的是旧的状态值。中），如果没有正确设置依赖项，可能会导致闭包中获取到的是旧值。属性通常是“受控”的，也就是说它们的行为完全取决于你传入的。不过在这个问题中，我们关注的是直接传给按钮的。
2025-07-01 14:37:00
941
原创 指尖上的魔法：JavaScript 实现手势识别的奇幻之旅
在detectGesture函数中，我们遍历图像数据的每一个像素点，通过简单的颜色判断（在实际应用中，需要更复杂准确的判断方法，比如利用机器学习训练模型）来找出可能是手部的像素点。从本质上来说，手势识别是一个让计算机理解人类肢体语言的过程，它把我们的动作转化成计算机能够理解的数字信号，就像把人类的语言翻译成计算机的 “母语”，这背后蕴含着计算机视觉、机器学习等诸多领域的智慧结晶。比如利用机器学习算法，通过大量的手势数据进行训练，让计算机能够识别更多复杂多样的手势，就像让计算机不断学习新的 “手语词汇”。
2025-06-30 19:01:10
780
原创 React组件中按钮的loading状态失效问题解决
Ant Design 的大多数组件都支持受控模式，即其状态完全由你传入的 props 控制。因此，确保传入的 props 是最新且正确的，是使用这些组件的关键。React 18 引入了并发模式的一些新特性，比如过渡更新（transitions）、批处理等，有时会让状态更新看起来“延迟”了。状态，而其内部逻辑依赖于某些 props，那么如果这些 props 没有变化，Hook 返回的状态也可能不变。中引用状态变量时，如果不更新依赖项，就会导致函数体中使用的是旧的状态值。只要你传入的值正确，它就应该正常工作。
2025-06-30 18:56:01
944
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人