Vue3 响应式开发

关联：Vue / 前端工程化

响应式是什么

响应式的核心是：数据变化 → 触发依赖更新 → 视图自动刷新。

在 Vue3 里，响应式主要由以下几块组成：

• ref：包一层 .value 的响应式引用，适合基本类型/单值
• reactive：把对象/数组变成响应式代理，适合结构化状态
• computed：基于依赖的派生值（带缓存）
• watch：监听一个或多个数据源的变化，执行副作用
• watchEffect：自动收集依赖的副作用（更“声明式”）

ref vs reactive（最常见的选型）

• ref(0)：数值、字符串、布尔、需要整体替换的值
• reactive({ ... })：对象表单、配置对象、多个字段整体管理

常见坑：对 reactive 解构会丢响应式（解构后变成普通值）；需要解构时通常用 toRefs/toRef。

computed 与 watch 怎么选

• computed：把“一个值”从其它状态推导出来（例如过滤结果、统计值）
• watch：数据变化要触发“动作”（请求接口、写本地缓存、与第三方库交互）

watch 常用参数：

• immediate：初始化就执行一次
• deep：深度监听（对象/数组嵌套时）

资料

• [07 Vue3 核心语法（一）响应式开发 讲义（师生共用版・两课时）.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/07%20Vue3%20%E6%A0%B8%E5%BF%83%E8%AF%AD%E6%B3%95%EF%BC%88%E4%B8%80%EF%BC%89%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BC%80%E5%8F%91%20%E8%AE%B2%E4%B9%89%EF%BC%88%E5%B8%88%E7%94%9F%E5%85%B1%E7%94%A8%E7%89%88%E3%83%BB%E4%B8%A4%E8%AF%BE%E6%97%B6%EF%BC%89.pdf)