用 AbortController 取消 fetch 请求，别再让旧数据覆盖新结果-低调大师

用 AbortController 取消 fetch 请求，别再让旧数据覆盖新结果

2026-10-05 1

Vue 3 中 watch 和 watchEffect 的竞态问题：为什么你的请求总被旧数据覆盖？

在 Vue 3 项目里用 watch 或 watchEffect 监听响应式数据并发送异步请求，经常会遇到一个隐蔽的问题：当依赖变化很快时，多个请求并发发出，但返回顺序无法保证，最终页面显示的可能不是最新数据。比如搜索框输入关键词，用户连续敲了几个字符，每个字符都触发一次请求，结果第二个请求的响应比第三个先回来，界面就被旧结果覆盖了。更糟的是，如果组件已经卸载，回调里还在更新状态，控制台会抛出一堆警告。这类竞态问题在 React 的 useEffect 里同样常见，但在 Vue 3 的响应式体系下有它自己的处理方式。这篇文章会从实际代码出发，讲清楚竞态产生的条件、如何用 onCleanup 和...

2026-10-05

0

在后台管理系统中做富文本评论框时，我选用了 contenteditable 来做轻量编辑器，需求很简单：输入 @ 时弹出用户列表，选中后插入一个带高亮的 mention 标签。但实际开发中遇到一个很烦的问题——每次用 JavaScript 修改 innerHTML 后，光标要么跳到开头，要么直接消失，中文输入法下尤其明显。排查后发现，根源是直接替换 DOM 导致浏览器无法保留原有的选区信息。这篇文章会从 Selection 和 Range 的机制讲起，说明为什么 innerHTML 会破坏光标，并给出用 Range 手动恢复光标、处理输入法组合事件、以及在 Vue/React 中安全封装这类编...

2026-10-05

1

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。