Vue3 工具函数（总结）
目录
前言
1.isRef
2.isReactive
3.isReadonly
4.isProxy
5.toRef
6.toRefs
7.unref
8.shallowRef
9.shallowReactive
10.triggerRef
11.customRef
12.markRaw
13.toRaw
14.readonly
15.watchEffect
前言
在 Vue 3 中，除了核心的响应式 API（如 ref、reactive、computed 等），Vue 还提供了许多工具函数，用于处理不同的场景和需求。这些工具函数在 vue 包中可以直接导入使用，它们帮助开发者在使用响应式数据、生命周期、组件状态等方面进行更灵活的控制和操作。
1.isRef
用来检查一个值是否是由
ref创建的响应式引用。
import { ref, isRef } from 'vue';
const count = ref(0);
console.log(isRef(count)); // true
console.log(isRef(123)); // false
2.isReactive
检查一个对象是否是通过
reactive创建的响应式对象
import { reactive, isReactive } from 'vue';
const obj = reactive({ name: 'Vue 3' });
console.log(isReactive(obj)); // true
console.log(isReactive({})); // false
3.isReadonly
用于检查一个对象是否是只读的（由
readonly创建）
import { readonly, isReadonly } from 'vue';
const state = readonly({ count: 0 });
console.log(isReadonly(state)); // true
4.isProxy
检查一个对象是否是由
reactive或readonly包装的代理对象
import { reactive, readonly, isProxy } from 'vue';
const reactiveObj = reactive({ name: 'Vue' });
const readonlyObj = readonly({ count: 0 });
console.log(isProxy(reactiveObj)); // true
console.log(isProxy(readonlyObj)); // true
5.toRef
用于将一个对象的某个属性转化为一个响应式的
ref。可以防止属性丢失响应性。
import { reactive, toRef } from 'vue';
const state = reactive({ name: 'Vue' });
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // 'Vue'
6.toRefs
用于将一个对象的每个属性都转换为
ref，返回一个新的对象，其中每个属性都是一个ref。
import { reactive, toRefs } from 'vue';
const state = reactive({ name: 'Vue', count: 10 });
const { name, count } = toRefs(state);
console.log(name.value); // 'Vue'
console.log(count.value); // 10
7.unref
如果传入的值是
ref，它将返回ref.value；否则，直接返回该值。简化了访问ref值的操作。
import { ref, unref } from 'vue';
const count = ref(10);
console.log(unref(count)); // 10
console.log(unref(100)); // 100 （不是 ref，直接返回原值）
8.shallowRef
创建一个浅层的
ref，即只有ref自身是响应式的，ref内部的对象不会变成响应式。
import { shallowRef } from 'vue';
const state = shallowRef({ count: 0 });
console.log(state.value.count); // 0
9.shallowReactive
创建一个浅层的响应式对象，只有对象的顶层属性是响应式的，嵌套对象则不是。
import { shallowReactive } from 'vue';
const state = shallowReactive({ user: { name: 'Vue' } });
// 修改顶层属性是响应式的
state.user = { name: 'Vue 3' };
// 嵌套的 `user` 对象内部属性不是响应式的
10.triggerRef
手动触发
ref的依赖更新，适用于在浅层响应式对象中修改内部值但需要手动触发响应的场景。import { shallowRef, triggerRef } from 'vue'; const state = shallowRef({ count: 0 }); state.value.count = 1; // 手动修改内部值 triggerRef(state); // 手动触发依赖更新
11.customRef
用来创建自定义的
ref，可以自定义get和set行为。
import { customRef } from 'vue';
function useDebouncedRef(value, delay) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
};
});
}
const count = useDebouncedRef(0, 300);
12.markRaw
- 用来标记一个对象，使其永远不会变成响应式对象。适用于希望保留原始对象（如第三方库对象）的场景
import { markRaw } from 'vue';
const rawObj = markRaw({ name: 'Vue' });
console.log(rawObj); // 该对象永远不会变成响应式
13.toRaw
获取一个响应式对象的原始对象，适用于调试或者避免特定场景下的响应式行为。
import { reactive, toRaw } from 'vue';
const state = reactive({ name: 'Vue' });
const rawState = toRaw(state);
console.log(rawState); // 返回原始的非响应式对象
14.readonly
创建一个只读的响应式对象。对象的任何修改都会被忽略并发出警告。
import { readonly } from 'vue';
const state = readonly({ count: 0 });
state.count = 1; // 将会触发警告，值不会被修改
15.watchEffect
是
watch的简化版本，自动追踪响应式依赖，并在依赖变化时重新执行传入的副作用函数。
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(count.value); // 自动追踪 count
});