摘要：import { reactive, toRef } from 'vue';const state = reactive({count: 0});const countRef = toRef(state, 'count'); //
在 Vue 3 中，ref 相关的 API 主要用于管理响应式数据。以下是 ref 相关的 API 及其用法：
ref 用于创建响应式的基本数据类型或对象。
用法示例：
import { ref } from 'vue';const count = ref(0);const increment = => {count.value++; // 访问和修改 ref 需要使用 `.value`};当前计数：{{ count }}
增加toRef 用于将响应式对象的某个属性创建为 ref，从而保持与原对象的绑定。
用法示例：
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};当前计数：{{ countRef }}
增加toRefs 用于将整个响应式对象的所有属性转换为 ref，适用于结构赋值场景。
用法示例：
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,message: 'Hello Vue3'});const { count, message } = toRefs(state); // 结构赋值的每个属性都是 ref计数：{{ count }}
消息：{{ message }}
shallowRef 创建浅层响应式，仅对 .value 本身进行响应式处理，而不深度追踪对象内部的变化。
用法示例：
import { shallowRef } from 'vue';const obj = shallowRef({ count: 0 });const update = => {obj.value.count++; // 不会触发视图更新obj.value = { count: obj.value.count }; // 需要重新赋值整个对象才会更新};计数：{{ obj.count }}
增加customRef 创建自定义的 ref，用于控制数据的读取和存储逻辑（如防抖或节流）。
用法示例（防抖 ref）：
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);搜索内容：{{ searchQuery }}
unref 直接获取 ref 的值，无需使用 .value。
用法示例：
import { ref, unref } from 'vue';const count = ref(10);console.log(unref(count)); // 10isRef 用于检查一个变量是否为 ref。
用法示例：
import { ref, isRef } from 'vue';const count = ref(0);console.log(isRef(count)); // trueconsole.log(isRef(100)); // falsetriggerRef 强制触发 shallowRef 的视图更新。
用法示例：
import { shallowRef, triggerRef } from 'vue';const obj = shallowRef({ count: 0 });const forceUpdate = => {obj.value.count++; // 不会触发更新triggerRef(obj); // 强制触发更新};计数：{{ obj.count }}
强制更新这些 API 能够帮助你在 Vue 3 中高效管理响应式数据。你在实际项目中有遇到相关问题吗？#vue3
来源：小康说科技
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
