假设有一个响应式对象 state，我们只想独立地访问和修改其中的某个属性，比如 count：

toRef

import { reactive, toRef } from 'vue';// 创建一个响应式对象
const state = reactive({count: 0,message: "Hello Vue 3"
});// 使用 toRef 创建 count 的引用
const countRef = toRef(state, 'count');// 现在 countRef 是一个响应式的引用，修改它会更新 state.count
countRef.value++; // state.count 将变成 1console.log(state.count); // 输出：1

toRefs

import { reactive, toRefs } from 'vue';const state = reactive({count: 0,message: "Hello Vue 3"
});// 使用 toRefs 将对象的属性全部转换为 ref
const { count, message } = toRefs(state);count.value++; // state.count 也将更新

toRaw

import { reactive, toRaw } from 'vue';// 创建一个响应式对象
const state = reactive({count: 0,message: "Hello Vue 3"
});// 获取响应式对象的原始版本
const rawState = toRaw(state);console.log(rawState); // 输出非响应式对象：{ count: 0, message: "Hello Vue 3" }// 修改 rawState 的属性，不会触发响应性更新
rawState.count++;
console.log(state.count); // 输出 0，因为修改了非响应式对象，不会影响响应式状态