Vue3 响应式工具函数

isRef()​

检查某个值是否为 ref。

unref()​

如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖

toRef()​

可以将值、refs 或 getters 规范化为 refs (3.3+)。

也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

isProxy()​

检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

isReactive()​

检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

isReadonly()​

检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。

通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，因为他们是没有 set 函数的 computed() ref。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<template>     <span>         <p>{{num}}</p>     </span> </template>   <script setup>     import {         ref, unref, toRef, isRef,         reactive, isReactive,         readonly, isReadonly,         isProxy     } from "vue"       var num = ref(10)     console.log(num) // ref     console.log(unref(num)) // 10       var data = reactive({num: 10})     var num_toRef = toRef(data, "num") // 使用toRef()函数把reactive中的某一个属性转成ref数据     console.log(num_toRef.value) // 10       console.log(isRef(num)) // true     console.log(isRef(100)) // false       var data_readonly = readonly(data)     console.log(isProxy(data)) // true     console.log(isProxy(data_readonly)) // true       console.log(isReactive(data)) // true     console.log(isReactive(data_readonly)) // true       console.log(isReadonly(data)) // false     console.log(isReadonly(data_readonly)) // true   </script>