一、isRef()
1.定义：
检查某个值是否为ref
2.用法：
<template>
<div></div>
</template>
<script setup>
import { ref, reactive, isRef } from "vue";
let money = ref(1000);
let obj = reactive({
name: "wa",
age: "20",
});
console.log("isRef(money)", isRef(money)); //isRef(money) true
console.log("isRef(obj)", isRef(obj)); //isRef(obj) false
</script>
<style></style>
二、unref()
1.定义：
如果参数是ref，则返回內部值，否则返回参数本身
2.用法：
<template>
<div></div>
</template>
<script setup>
import { ref, reactive, isRef,unref } from "vue";
let money = ref(1000);
let grade = 1
let obj = reactive({
name: "wa",
age: "20",
});
console.log("unref(money)", unref(money)); //unref(money) 1000
console.log("unref(obj)", unref(obj)); //unref(obj) Proxy(Object) {name: 'wa', age: '20'}
</script>
<style></style>
三、toRef()
1.定义：
基于响应式对象上的一个属性，创建一个对应的ref，这样创建的ref与其源属性保持同步，改变源属性的值将更新ref的值，反之亦然
2.用法：
<template>
<div>
<input type="button" value="点我给obj的age加1" @click="testobj">{{ obj.age }}
<br>
<input type="button" value="点我给obj解构出的age加1" @click="testage">{{ age }}</div>
</template>
<script setup>
import { ref, reactive, isRef,unref,toRef } from "vue";
let money = ref(1000);
let obj1 = {
name: "wa",
age: 20,
}
let obj = reactive(obj1)
// let obj = reactive({
// name: "wa",
// age: "20",
// });
let age = toRef(obj,"age")
function testobj(){
obj.age++
console.log(obj.age)
}
function testage(){
age.value+=1
console.log(age.value)
}
</script>
<style></style>
四、toRefs()
1.定义：
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref，每个单独的ref都是用toRef()创建的。
2.用法：
<template>
<div>
<input type="button" value="点我给obj的age加1" @click="testobj" />{{
obj.age
}}
<br />
<input type="button" value="点我给obj解构出的age加1" @click="testage" />{{
age
}}
<br />
<h3 @click="obj.name = 'zh'">objname:{{ obj.name }}</h3>
<h3 @click="name = 'li'">name:{{ name }}</h3>
</div>
</template>
<script setup>
import { ref, reactive, isRef, unref, toRef, toRefs } from "vue";
let money = ref(1000);
let obj1 = {
name: "wa",
age: 20,
};
let obj = reactive(obj1);
let { name, age } = toRefs(obj);
function testobj() {
obj.age++;
console.log(obj.age);
}
function testage() {
age.value += 1;
console.log(age.value);
}
</script>
<style></style>