先说ref()和reactive()
Vue3这两个API作用是相似的，只不过ref()是针对变量的响应式包装，而reactive()是针对对象的响应式包装。
ref()和reactive()对比
| API | 说明 | 目标 |
| ref() | 传入一个值，返回一个响应式的变量 | 变量 |
| reactive() |
返回一个对象的响应式代理。 通过Proxy包裹，因此，返回的对象不等于源对象。 |
对象 |
ref()和shallowRef()对比
| API | 说明 | 深度 |
| ref() |
如果将一个对象赋值给ref，那么这个对象将通过reactive()转为具有深层次响应式的对象。 如果该对象中包含了嵌套的ref，它们将被深层地解包。 |
深层 |
| shallowRef() |
ref()的浅层作用形式。可以避免以上那种深层次的转换 |
浅层 |
reactive()和shallowReactive()对比
| API | 说明 | 深度 |
| reactive() | 一个响应式对象也将深层地解包任何ref属性，同时保持响应性。（响应式数组和Map这样的原生集合类型中的ref元素除外） | 深层 |
| shallowReactive() |
reactive()的浅层作用形式。 没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的，属性的值会被原样存储和暴露。 这也意味着值为ref的属性不会被自动解包。 |
浅层 |
标签：响应,对象,浅层,reactive,API,Vue3,ref From： https://www.cnblogs.com/cathy1024/p/17357707.html