Vue3中ref和reactive的对比

 

 

先说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的属性不会被自动解包。	浅层