vue3中的isRef toRef toRefs readonly

目录

isRef  

toRef

 toRefs

 readonly

---

isRef  

isRef 判断是否为响应性变量 

用法：isRef("变量"),

点击按钮控制台打印

从obj.name不是响应式数据看出引用数据的属性值不是响应式的。

toRef

toRef 把引用数据的属性值设置为变量 并且关联和设置为响应性变量

用法：let x=toRef(obj,"x") // 隐式 let x=ref(obj.x);并且响应到obj对象去,在script里边取值时要用 .value

点击按钮之后界面和控制台：

控制台打印为true说明为obj.name成功变为响应式数据，再由界面的小狮子变为小羊说明该响应式数据成功响应到了obj对象里去

 toRefs

toRefs 引用数据响应式解构

用法：如，let obj2=reactive({a:10,b:20})
let {a,b}=toRefs(obj2)//a,b变量具备响应功能、在script里边取值时要用 .value

 普通的结构是不能具备 响应式数据的如：

点击按钮后界面和控制台：

 

发现数据刷新界面却没有刷新，说明普通解构是不具有响应式数据的。

我们稍作改变如：

 此时再点击按钮得到的变化为：

由此可以看出数据改变界面也跟着改变，所以  toRefs解构是响应式数据

 readonly

readonly 把数据变为只读功能

 用法：如：let obj=readonly ({ })

 点击按钮之后界面和控制台：

 

 

 由此看出数据没有被改变，且界面也没有刷新。