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

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数据类型

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

let s