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
});