to全家桶

toRef：能将reactive的属性转化为ref对象，但是不能将非响应式的数据转化为ref对象。可以用于将reactive的属性解构成ref对象。

用法如下：

vue
12345
<script setup lang="ts">
import { reactive, toRef } from 'vue';
const Cain = reactive({name: "Cain"})
const name = toRef(Cain, "name")
</script>
toRefs:能将reactive的每一个属性转化为ref对象，用法如下：
vue
123456789
<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
const { name, age, gander} = toRefs(Cain)
</script>

toRefs的底层实现非常简单，就是将reactive的每个属性都使用toRef转成ref，再创建一个全是ref对象属性reactive返回出去

vue
1234567891011121314151617
<script setup lang="ts">
import { reactive, toRef } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
//手写toRef
const toRefs = <T extends object>(object: T) => {
    const map:any = {}
    for (let key in object) {
      map[key] = toRef(object,key)
    }
    return map
}
const { name, age, gander} = toRefs(Cain)
</script>
toRaw:将响应式对象转化为普通对象，即消除响应式。

用法如下：

vue
123456789
<script setup lang="ts">
import { onMounted, reactive, toRaw, toRef } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
console.log(Cain,toRaw(Cain))
</script>

可以看到将原来的proxy对象变成了普通对象

image-20251016121355790