Vu3 函数式API：方法函数 isRef()、unref()、toRef()、toValue()、toRefs()、isProxy()、isReactive()

Vu3 函数式API：方法函数 isRef()、unref()、toRef()、toValue()、toRefs()、isProxy()、isReactive()

isRef()

• 查某个值是否为 ref。

import { ref, isRef } from 'vue';
<!-- 定义一个 ref 对象 -->
const count = ref(0);
console.log(isRef(count)); // 输出 true
<!-- 检查一个普通对象是否为 ref： -->
const normalObject = {};
console.log(isRef(normalObject)); // 输出 false

unref()

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

import { ref, unref } from 'vue';

const count = ref(0);
console.log(unref(count)); // 输出 0

const normalValue = 10;
console.log(unref(normalValue)); // 输出 10

toRef()

• 将一个对象的属性转换为 ref 对象，这样当这个 ref 对象的值变化时，原始对象的对应属性也会更新

import { reactive, toRef } from 'vue';

const state = reactive({ name: 'Alice', age: 25 });
const nameRef = toRef(state, 'name');

// 修改原对象属性会更新 ref
state.name = 'Bob';
console.log(nameRef.value); // 'Bob'

// 修改 ref 也会更新原对象
nameRef.value = 'Charlie';
console.log(state.name); // 'Charlie'

toValue()

• 返回传入对象的值。如果传入的是 ref 对象，返回其内部的值；如果是响应式对象（reactive 创建的对象），返回其原始值

import { ref, toValue } from 'vue';

const numRef = ref(10);
const getter = () => 20;

console.log(toValue(numRef)); // 10
console.log(toValue(getter)); // 20
console.log(toValue(30)); // 30

const state = reactive({ count: 0 });
console.log(toValue(state)); // 输出 {count: 0}

toRefs()

• 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。主要用于在模板中解构响应式对象时保持其响应性

import { reactive, toRefs } from 'vue';

const state = reactive({ x: 10, y: 20 });
const refs = toRefs(state);

// 解构后仍保持响应式
const { x, y } = refs;

// 修改原对象属性会更新 ref
state.x = 100;
console.log(x.value); // 100

// 修改 ref 也会更新原对象
y.value = 200;
console.log(state.y); // 200

isProxy()

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

import { reactive, isProxy } from 'vue';

const obj = reactive({ foo: 'bar' });
console.log(isProxy(obj)); // true

const plainObj = { baz: 'qux' };
console.log(isProxy(plainObj)); // false

const ro = readonly({});
console.log(isProxy(ro)); // true

isReactive()

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

import { reactive, isReactive } from 'vue';
//reactive 创建的对象
const obj = reactive({ foo: 'bar' });
console.log(isReactive(obj)); // true

const plainObj = { baz: 'qux' };
console.log(isReactive(plainObj)); // false
// readonly 创建的对象
const state = readonly({ count: 0 });
console.log(isReactive(state)); // 输出 false

isReadonly()

• 检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。
• 通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，类似于没有 set 函数的 computed() ref。

import { readonly, reactive, isReadonly } from 'vue';
//readonly 创建的对象
const ro = readonly({});
//reactive 创建的对象
const state = reactive({});

console.log(isReadonly(ro)); // true
console.log(isReadonly(state)); // false

注意

• toRef / toRefs​​: 在组合式函数中解构 reactive 对象时保持响应式。
• unref​​: 简化对可能为 ref 值的处理（如函数参数可能是 ref 或普通值）。
• toValue​​: 在组合式函数中统一处理 ref、getter 或普通值。
• isProxy / isReactive / isReadonly​​: 开发工具或高级库中判断对象的响应式状态。-