tuse101的博客

本文记录了一个树形组件（CategoryTree）从"暴力刷新整棵树"到"精准更新"的性能优化全过程。通过8个阶段的逐步演进：1) 优化Props分组降低重渲染成本；2) 引入乐观UI消除新增节点闪烁；3) 本地更新替代整树刷新；4) 建立索引实现O(1)定位；5) 使用React.memo精准控制渲染；6) 按需重建索引；7) 本地替换新增节点。最终实现O(1)定位+O(depth)更新+精准重渲染的高效方案，核心在于数据结构优化、状态粒度控制和React渲染机制的

Vue3 实时音频录制与转写 Composable 技术摘要 本文介绍了基于 Vue3 Composition API 实现的实时音频录制与转写解决方案。核心技术栈包括： 音频录制层：使用 MediaRecorder API 获取麦克风权限并录制音频流，支持回声消除、降噪等优化 双音频流处理： 原始采样率流用于高质量录音保存 16000Hz 采样率流用于 ASR 转写 音频格式转换：将 Float32 音频数据转换为 16 位 PCM 格式，适配 ASR 服务标准 实时传输机制： 采用 200ms 音频分块

JavaScript事件循环机制解析：单线程通过调用栈、任务队列和事件循环处理异步操作。同步代码直接执行，异步任务分为宏任务（setTimeout等）和微任务（Promise.then等）。执行顺序遵循"同步>微任务>宏任务"原则，每个宏任务执行后都会清空微任务队列。async/await本质是Promise语法糖，await后的代码作为微任务处理。典型示例展示了"1 4 3 2"的输出顺序，体现了事件循环的优先级规则。理解这种机制对掌握JavaScrip

本文总结了防抖（Debounce）的概念、应用场景及实现方式。防抖通过控制函数执行频率，解决高频触发问题，常见于按钮点击、表单提交等场景。文章介绍了基础版和立即执行版防抖的实现逻辑，分析了普通函数与箭头函数在this绑定上的差异，并解读了Underscore.js源码的核心思路。防抖本质依靠定时器和状态控制，关键在于理解冷却期机制和this绑定规则。作者分享了项目实践经验，欢迎读者交流讨论。

本文深入探讨了Vue 3中Keep-Alive组件的使用原理与最佳实践。Keep-Alive通过缓存组件实例来优化用户体验，避免重复创建销毁组件，保留状态和滚动位置。文章从基础使用、Vue Router集成到常见问题解决方案展开，重点分析了include/exclude属性基于组件name的匹配机制及其潜在问题。针对命名冲突和缓存控制难题，提出了基于路由meta的解决方案，通过动态判断路由元信息来决定是否启用缓存。同时介绍了生命周期钩子(activated/deactivated)在状态管理中的应用，为开发

实习项目中遇到Vue3+Keep-Alive下window滚动位置共享问题：由于window.scrollY是全局状态，导致不同页面切换时滚动位置错误保留。解决方案包括两种：1) 开发滚动位置管理工具，通过Map保存各路由滚动位置，在组件生命周期中恢复；2) 简单项目中直接在路由切换后重置到顶部。两种方案根据项目复杂度选择，既保证用户体验又易于维护。

本文总结了uni-app中页面栈溢出问题的修复方案。问题源于频繁使用navigateTo导致页面栈超过10个上限，表现为ai-write与template页面循环跳转时持续压栈。解决方案通过区分页面来源：从ai-write进入时用navigateBack返回，从外部进入时用redirectTo跳转。实现采用URL参数传递来源标记+本地存储跨生命周期保存状态，并添加错误处理机制。关键点在于合理选择跳转API（navigateTo/redirectTo/navigateBack）和正确管理页面状态，最终形成闭环

摘要： 作者在Vue3开发动态Todo列表时，最初为每个删除按钮绑定@click事件，但随着列表增长，面临事件监听器过多、动态列表维护困难、模板臃肿等问题。通过重构为事件委托（仅在父元素<ul>绑定事件，利用事件冒泡统一处理子元素交互），显著优化了性能与代码可维护性。文章对比了传统绑定与事件委托的差异，强调其在动态列表、多操作场景下的优势，并解析了Vue事件修饰符（如.stop、.prevent）的实际应用。最终结论：事件委托在Vue3中仍具价值，能简化模板、提升性能，适合复杂交互场景。

本文分享了前端开发中事件冒泡机制的经验总结。作者通过可乐气泡的比喻解释了事件冒泡原理：从目标元素逐级向上传递至document/window。文章指出事件冒泡的优势（事件委托、性能优化）和潜在问题（意外触发父级逻辑），并重点介绍了在UniApp/Vue项目中通过@click.stop和event.stopPropagation()阻止冒泡的方法。作者结合上传图片功能的实际案例，展示了未阻止冒泡导致同时触发父子逻辑的问题，强调在嵌套点击场景中合理使用.stop的重要性。最后建议开发者理解并善用事件冒泡机制，避

本文总结了Nginx转发配置的关键知识点和404问题排查经验。主要内容包括：1) 通过实际案例说明前端接口404问题的排查过程，发现是后端新增路径前缀未同步导致；2) 详细解析Nginx路径匹配规则，重点对比proxy_pass加斜杠与不加斜杠的区别；3) 提供配置建议，推荐在API转发时使用location+proxy_pass带斜杠的写法；4) 总结路径不一致导致404的根本原因及解决方案。文章通过具体示例和对比表格，清晰展示了Nginx转发的核心机制，对前后端联调具有实用指导价值。

这些属于以下知识领域：选项对象模式（Options Object Pattern）：

文章摘要：本文分享了开发微信小程序录音功能时遇到的问题及解决方案。作者发现同事代码无法上传录音后，自己实现了一个纯净的hooks，支持录音、暂停、播放和上传功能。该hooks封装了录音状态管理、错误处理和音频播放等功能，并提供了响应式变量供页面使用。文章详细介绍了hooks的实现细节，包括录音计时、错误回调等，并给出了使用示例。作者最终通过自主实现验证了功能可行性，为后续排查同事代码问题奠定了基础。（150字）