Vue3：响应式 API-工具函数 isRef()、unref()、toRef()、toRefs()、readonly()

 isRef()

检查某个值是否为 ref。

<script setup>
import {ref,isRef} from "vue"
let msg=ref(0)
function fn(){
    console.log(isRef(msg)) //判断是否为响应性变量  
}
< /script>

 

unref()

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

 

toRef()

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

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

 

toRefs()

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

 

import {ref,isRef,reactive,toRef,toRefs} from "vue"
let obj=reactive({x:20,y:20})

let x=toRef(obj,"x")// 隐式 let x=ref(obj.x);并且响应到obj对象去

　let obj2 = reactive({ x: 2, y: 2 });

  let x = toRef(obj, obj2);

　console.log(x);

 

readonly()

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

import {isRef,reactive,toRef,toRefs,readonly} from "vue"
let obj=readonly({})