Vue3 响应式工具函数

草木物语 / 2023-08-29 / 原文

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。

<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>