目录
前言
在 Vue 3 中，除了核心的响应式 API（如 ref、reactive、computed 等），Vue 还提供了许多工具函数，用于处理不同的场景和需求。这些工具函数在 vue 包中可以直接导入使用，它们帮助开发者在使用响应式数据、生命周期、组件状态等方面进行更灵活的控制和操作。
1.isRef
import { ref, isRef } from 'vue';
const count = ref(0);
console.log(isRef(count)); // true
console.log(isRef(123)); // false
2.isReactive
import { reactive, isReactive } from 'vue';
const obj = reactive({ name: 'Vue 3' });
console.log(isReactive(obj)); // true
console.log(isReactive({})); // false
3.isReadonly
import { readonly, isReadonly } from 'vue';
const state = readonly({ count: 0 });
console.log(isReadonly(state)); // true
4.isProxy
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
import { reactive, toRef } from 'vue';
const state = reactive({ name: 'Vue' });
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // 'Vue'
6.toRefs
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
import { ref, unref } from 'vue';
const count = ref(10);
console.log(unref(count)); // 10
console.log(unref(100)); // 100 （不是 ref，直接返回原值）
8.shallowRef
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
11.customRef
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
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(count.value); // 自动追踪 count
});
