proxyrefs 是 vue 3 提供的工具函数，用于在 js 中自动解包 ref 属性，使读写无需 .value；它解决纯 js 环境中频繁访问 .value 的繁琐问题，适用于组合式逻辑封装、跨环境桥接及共享状态 api 简化。
proxyRefs 是 Vue 3 响应式系统中的一个底层工具函数，它本身不直接用于模板，但能让你在普通 JavaScript 中模拟 Vue 模板里“自动解包 ref”的行为——即访问 ref 时无需写 .value，读写都像普通属性一样自然。
什么是 proxyRefs？它解决了什么问题？
Vue 模板中，{{ count }} 能直接读取 ref(0) 的值，是因为编译器在生成渲染函数时做了自动解包。但在纯 JS（比如组合式函数、工具类、非 setup 环境）中，你必须显式写 count.value，很繁琐。proxyRefs 就是把一个包含 ref 和普通值的对象，包装成一个代理对象：对 ref 属性的读取/赋值会自动触发 .value 的访问或设置，对普通属性则透传不变。
基础用法：让 ref 像普通字段一样用
假设你有一组状态：
```jsimport { ref, proxyRefs } from 'vue'
const state = proxyRefs({
count: ref(0),
name: ref('Alice'),
version: '1.2.0' // 普通字符串，不响应式
})
// ✅ 自动解包：读写都不需要 .value
console.log(state.count) // 0
state.count++ // 相当于 state.count.value++
console.log(state.name) // 'Alice'
state.name = 'Bob' // 相当于 state.name.value = 'Bob'
// ✅ 普通字段照常工作
console.log(state.version) // '1.2.0'
state.version = '1.3.0'
```
典型适用场景
-
封装组合式逻辑到普通 class 或工具函数中：避免到处写
.value，提升可读性。例如封装一个表单状态管理器，内部用 ref，对外暴露 proxyRefs 包装后的实例。 -
与非 Vue 环境桥接：比如在测试代码、Node.js 工具脚本中复用部分 Vue 响应式逻辑，又不想被
.value缠绕。 - 简化跨组件共享状态的 API：导出一个 proxyRefs 包装的对象，调用方无需关心哪些是 ref、哪些不是，统一按属性操作。
注意事项和边界
- 只对对象自身属性生效，不递归处理嵌套对象（除非嵌套对象也是 proxyRefs 包装的）。
- 不能解包
computed或shallowRef等特殊 ref（但computed本身已返回 ref-like 对象，通常不需要再解包）。 - 解包是浅层的：如果属性值是另一个对象，该对象内部的 ref 不会被自动解包。
- 它只是语法糖，不改变响应式原理；底层仍是 ref + Proxy，性能开销极小，但别滥用在高频循环中。
