vue3 ref 、unref 、toRef、toRefs

ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value属性，指向该内部值。

示例

const count = ref(0)
console.log(count.value) // 0

 如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象

unref

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

import { unref } from "vue";
let msgref = ref('你好')
console.log(unref(msgref)) // 你好
let  msg = '你好'
console.log(unref(msg)) // 你好

toRef

可以用来为源响应式对象上的某个 property 新创建一个 reactive。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

 const state = reactive({
            foo: 1,
            bar: 2
        })
        const fooRef = toRef(state, 'foo')
        console.log(fooRef.value)
        fooRef.value++
        console.log(fooRef.value) //2
        console.log(state.foo)    //2
        state.foo++
        console.log(fooRef.value) // 3
        console.log(state.foo ) //3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

        import { reactive, toRefs } from "vue";         
        const state = reactive({
            foo: 1,
            bar: 2
        })
        const stateAsRefs = toRefs(state)
        // ref 和原始 property 已经“链接”起来了
        state.foo++
        console.log(stateAsRefs.foo.value) // 2
        console.log(state.foo) //2
        stateAsRefs.foo.value++
        console.log(state.foo) // 3
        console.log(stateAsRefs.foo.value) //3

toRef 和 toRefs 都是复制,它复制的其实就是引用 + 响应式 ref
toRef和 加toRefs的区别

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

isRef

检查值是否为一个 ref 对象。

        import { reactive, ref,isRef } from "vue";        
        let info = reactive({ user: 'John Doe' })
        const state = ref({
            foo: 1,
            bar: 2
        })
        console.log(isRef(state)) // true
        console.log(isRef(info)) // false