vue3中的ref相关的api及用法

在 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` 更新