Vue3入门到精通--ref以及ref相关函数

本文介绍了Vue中的ref对象及其相关方法，如isRef用于判断对象是否为ref，unref用于解引并返回原始值，toRef用于将数据类型转换为ref，以及toRefs用于批量转换响应式对象。还讨论了shallowRef和triggerRef的区别，以及customRef的自定义功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let obj = { name: “1” };

let stateRef = ref(obj);

console.log(“obj”, obj.name);

console.log(“ref”, stateRef.value.name);

// obj 1

// ref 1

stateRef.value.name = ‘2’;

console.log(“obj”, obj.name);

console.log(“ref”, stateRef.value.name);

// obj 2

// ref 2

obj.name=‘3’

console.log(“obj”, obj.name);

console.log(“ref”, stateRef.value.name);

// obj 3

// ref 3




[]( )相关API

---------------------------------------------------------------



### []( )isRef



#### []( )作用



判断是都是ref对象



> 其实内部是判断数据对象上是否包含`__v_isRef` 属性并且其值为 `true`。



#### []( )用法

const a = ref(a)

const b = ‘b’

cosnole.log(isRef(a)) // true

console.log(isRef(b)) // false




### []( )unref



如果参数为 [`ref`]( )，则返回内部值，否则返回参数本身。这是 `val = isRef(val) ? val.value : val`。

const temp=ref(3)

const newTemp = unref(1) // newTemp 确保现在是数字类型 3

const a = unref(1) // a 确保现在是数字类型 1




### []( )toRef



#### []( )作用



> 将**引用数据类型**转换为ref数据类型

> 

> 将reavtive数据类型转换为ref数据类型



#### []( )用法



##### []( )**引用数据类型**

let obj = { name: “syl”, age: “123” };

let stateToref = toRef(obj, “name”); // 将name拿出来

stateToref.value = “zs”;

console.log(“obj”, obj.name);

console.log(“ref”, stateToref.value);

// obj zs

// ref zs

obj.name = “ls”;

console.log(“obj”, obj.name);

console.log(“ref”, stateToref.value);

// obj ls

// ref ls




##### []( )reactive数据类型