在 Vue 3 中，ref 相关的 API 主要用于管理响应式数据。以下是 ref 相关的 API 及其用法：

---

1. ref

ref 用于创建响应式的基本数据类型或对象。

用法示例：

<script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++; // 访问和修改 ref 需要使用 `.value`
};
</script><template><div><p>当前计数：{{ count }}</p><button @click="increment">增加</button></div>
</template>

---

2. toRef

toRef 用于将响应式对象的某个属性创建为 ref，从而保持与原对象的绑定。

用法示例：

<script setup>
import { reactive, toRef } from 'vue';const state = reactive({count: 0
});const countRef = toRef(state, 'count'); // countRef 和 state.count 绑定const increment = () => {countRef.value++; // 修改 countRef.value 也会修改 state.count
};
</script><template><div><p>当前计数：{{ countRef }}</p><button @click="increment">增加</button></div>
</template>

---

3. toRefs

toRefs 用于将整个响应式对象的所有属性转换为 ref，适用于结构赋值场景。

用法示例：

<script setup>
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,message: 'Hello Vue3'
});const { count, message } = toRefs(state); // 结构赋值的每个属性都是 ref
</script><template><div><p>计数：{{ count }}</p><p>消息：{{ message }}</p></div>
</template>

---

4. shallowRef

shallowRef 创建浅层响应式，仅对 .value 本身进行响应式处理，而不深度追踪对象内部的变化。

用法示例：

<script setup>
import { shallowRef } from 'vue';const obj = shallowRef({ count: 0 });const update = () => {obj.value.count++; // 不会触发视图更新obj.value = { count: obj.value.count }; // 需要重新赋值整个对象才会更新
};
</script><template><div><p>计数：{{ obj.count }}</p><button @click="update">增加</button></div>
</template>

---

5. customRef

customRef 创建自定义的 ref，用于控制数据的读取和存储逻辑（如防抖或节流）。

用法示例（防抖 ref）：

<script setup>
import { ref, customRef } from 'vue';function useDebouncedRef(value, delay = 300) {let timeout;return customRef((track, trigger) => {return {get() {track(); // 追踪依赖return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger(); // 触发更新}, delay);}};});
}const searchQuery = useDebouncedRef('', 500);
</script><template><input v-model="searchQuery" placeholder="输入搜索内容" /><p>搜索内容：{{ searchQuery }}</p>
</template>

---

6. unref

unref 直接获取 ref 的值，无需使用 .value。

用法示例：

<script setup>
import { ref, unref } from 'vue';const count = ref(10);console.log(unref(count)); // 10
</script>

---

7. isRef

isRef 用于检查一个变量是否为 ref。

用法示例：

<script setup>
import { ref, isRef } from 'vue';const count = ref(0);console.log(isRef(count)); // true
console.log(isRef(100)); // false

---

8. triggerRef

triggerRef 强制触发 shallowRef 的视图更新。

用法示例：

<script setup>
import { shallowRef, triggerRef } from 'vue';const obj = shallowRef({ count: 0 });const forceUpdate = () => {obj.value.count++; // 不会触发更新triggerRef(obj); // 强制触发更新
};
</script><template><div><p>计数：{{ obj.count }}</p><button @click="forceUpdate">强制更新</button></div>
</template>

---

总结

API	作用
ref(value)	创建响应式数据（基本类型或对象）
toRef(obj, key)	将对象的某个属性转为 ref
toRefs(obj)	将整个对象的属性转为 ref
shallowRef(value)	创建浅层响应式 ref
customRef((track, trigger) => {...})	创建自定义 ref
unref(ref)	获取 ref 的值（等价于 ref.value）
isRef(value)	判断是否为 ref
triggerRef(ref)	强制触发 shallowRef 更新

这些 API 能够帮助你在 Vue 3 中高效管理响应式数据。你在实际项目中有遇到相关问题吗？