vue3中ref、reactive、toRef、toRefs的使用

vue3中ref、reactive、toRef、toRefs的使用

四个函数都是用于在setup中创造响应式变量的

ref

ref可用于任何类型的数据创建响应式，取值需要加.value。对于基本数据类型，ref的性能优于reactive，而对于对象类型，ref仍然是通过reactive包装实现的。推荐优先使用ref，方便逻辑拆分和业务解耦。

  
{{ webName }}

reactive

reactive只用于创建引用类型数据的响应式，取值不需要加.value。

  
{{ objData.webName }}
  
{{ objData.webUrl }}

toRef

将对象中的属性单独变成响应式数据

  
{{ objData1.webName }}
  
{{ objData1.webUrl }}
  
{{ objData2.webName }}
  
{{ objData2.webUrl }}

toRefs

使解构后的数据重新获得响应式

  
{{ webName }}
  
{{ webUrl }}

总结

类型	是否触发页面改变	是否可以解构
ref	✔	❌
reactive	✔	❌
toRef	❌	❌
toRefs	❌	✔