Vue 3 中 watch 与 watchEffect 的依赖收集差异导致页面重复请求的排查记录-低调大师

Vue 3 中 watch 与 watchEffect 的依赖收集差异导致页面重复请求的排查记录

2026-10-08 3

Vue 3 中 reactive 对象解构后丢失响应式，为什么 ref 能解决？

在 Vue 3 项目里，从 reactive 对象上解构属性是很常见的写法，比如把 user.name 拆出来直接用在模板里。但很多人会踩到一个坑：解构之后的值不再随源对象变化而更新，视图就“卡”住了。这个问题通常出现在表单、配置面板、列表项编辑等场景，本质是 JavaScript 解构复制的是值，而不是引用，而 Vue 的响应式追踪依赖的是属性访问。ref 之所以能解决，是因为它把值包在一个带 .value 的对象里，解构出来的是这个对象本身，响应式链接没有断。这篇文章会从 Proxy 的依赖收集讲起，分析解构丢失响应式的具体过程，并给出 toRef、toRefs、计算属性等实际可用的处理方...

2026-10-08

3

在 Vue 3 的组合式 API 里，watch 和 watchEffect 是处理响应式副作用的常用工具。一个典型的开发场景是：监听搜索关键词、路由参数或分页条件的变化，然后发起异步请求。如果用户快速切换条件，先发出的请求可能比后发出的请求更晚返回，导致旧数据覆盖新数据。这个问题在搜索框输入、标签切换、分页加载中都很常见。Vue 提供了 onCleanup 回调，允许在副作用重新执行或组件卸载时取消未完成的请求。但很多人只是简单地用 watch 监听，忽略了清理逻辑，结果在浏览器网络面板中看到多个 pending 请求，页面数据偶尔错乱。这篇文章会从实际代码出发，说明 watch 和 wat...

2026-10-08

2

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

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