Vue 3 响应式系统基于 Proxy，但存在四类边界情况：一是 reactive 不支持基本类型，需用 ref；二是直接赋值 reactive 变量会丢失响应式；三是解构 reactive 对象会脱离代理，需 toRefs；四是修改原始对象而非代理对象不触发更新。
Vue 3 的响应式系统基于 Proxy，能力远超 Vue 2 的 Object.defineProperty，但并非“万能”。它仍受限于 JavaScript 语言特性与设计取舍，存在几类典型边界情况——不是缺陷，而是需主动适配的使用前提。
基本类型无法被 reactive 代理
reactive() 只接受对象、数组、Map、Set 等引用类型。传入数字、字符串、布尔值会静默失败，返回原值（非响应式）。
- ❌
const count = reactive(10)—— 不报错，但无响应 - ✅ 基本类型请用
ref()：const count = ref(10)，访问时写count.value - ⚠️ 注意：解构
ref也会丢失响应式，应配合toRefs或保持.value访问
直接赋值整个 reactive 对象会切断响应式
Proxy 代理的是“原始对象的引用”，不是“变量绑定”。若对 reactive 变量重新赋值，就等于扔掉旧代理、指向新普通对象。
FastAPI Flask Proxy
下载
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
- ❌
const state = reactive({ a: 1 }); state = { b: 2 };—— 此时state已是普通对象，不再响应 - ✅ 应始终修改属性：
state.a = 2或Object.assign(state, { b: 2 }) - ✅ 若需整体替换，推荐用
ref包裹对象：const state = ref({ a: 1 }); state.value = { b: 2 };
解构 reactive 会丢失响应式
解构操作提取的是属性值本身（如字符串、数字），脱离了 Proxy 代理层，后续修改不触发更新。
立即学习“前端免费学习笔记（深入）”；
- ❌
const { name, age } = reactive({ name: 'Alice', age: 25 }); name = 'Bob';—— 模板不会更新 - ✅ 使用
toRefs()解构：const { name, age } = toRefs(reactive({ name: 'Alice', age: 25 }))，此时name是Ref，赋值需name.value = 'Bob' - ✅ 或统一用
toRef提取单个响应式引用
原对象被直接修改时，代理不感知
Proxy 代理的是目标对象，但不阻止你绕过代理直接操作原始对象。一旦跳过代理，响应式链条即中断。
- ❌
const raw = { x: 1 }; const proxy = reactive(raw); raw.x = 2;—— 视图不更新 - ✅ 所有修改必须作用于代理对象：
proxy.x = 2 - ✅ 开发中建议禁用对原始对象的直接访问，必要时可用
markRaw()明确标记无需响应式的对象（如第三方库实例）
