Vue3中customRef自定义ref过程

import { customRef } from 'vue';

// 工厂函数：接收初始值，返回 customRef 对象
function useBasicRef(initialValue) {
  let value = initialValue; // 闭包保存值

  return customRef((track, trigger) => {
    return {
      // 读取值时触发，调用 track() 收集依赖
      get() {
        track(); // 告诉 Vue 这个值被依赖（如模板中的 {{ value }}）
        console.log('获取值:', value);
        return value;
      },
      // 修改值时触发，调用 trigger() 通知更新
      set(newValue) {
        value = newValue; // 更新值
        console.log('设置值:', newValue);
        trigger(); // 通知 Vue 重新渲染依赖该值的组件
      }
    };
  });
}

// 在组件中使用
const basicRef = useBasicRef('初始值');

import { customRef } from 'vue';

function useDebouncedRef(initialValue, delay = 500) {
  let timer = null; // 闭包保存定时器
  let value = initialValue;

  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 收集依赖
        return value;
      },
      set(newValue) {
        clearTimeout(timer); // 清除之前的定时器
        timer = setTimeout(() => {
          value = newValue; // 延迟后更新值
          trigger(); // 触发更新
        }, delay);
      }
    };
  });
}

// 在组件中使用
const searchQuery = useDebouncedRef('', 500);
// 模板中：<input v-model="searchQuery" />

import { customRef } from 'vue';

function useValidatedRef(initialValue, validator) {
  let value = initialValue;
  let error = null;

  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 收集依赖
        return { value, error }; // 返回值和错误信息
      },
      set(newValue) {
        const validationResult = validator(newValue); // 验证数据
        if (validationResult === true) {
          value = newValue; // 验证通过，更新值
          error = null;
        } else {
          error = validationResult; // 验证失败，保存错误信息
        }
        trigger(); // 触发更新（视图会显示错误信息）
      }
    };
  });
}

// 验证函数：检查年龄是否在 18-120 之间
const ageValidator = (value) => {
  if (typeof value !== 'number' || value < 18 || value > 120) {
    return '年龄必须在 18-120 之间';
  }
  return true;
};

// 在组件中使用
const age = useValidatedRef(20, ageValidator);
// 模板中：<input v-model.number="age.value" /><span v-if="age.error" style="color: red">{{ age.error }}</span>

import { customRef } from 'vue';

function useAsyncRef(asyncFunction) {
  let value = null;
  let isLoading = true;

  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 收集依赖
        return { value, isLoading }; // 返回值和加载状态
      },
      set(newValue) {
        // 触发异步操作（如获取用户信息）
        asyncFunction(newValue).then((data) => {
          value = data; // 更新值
          isLoading = false; // 结束加载
          trigger(); // 触发更新
        }).catch((error) => {
          console.error('异步操作失败:', error);
          isLoading = false; // 结束加载
          trigger(); // 触发更新
        });
      }
    };
  });
}

// 模拟异步函数：获取用户信息
const fetchUserInfo = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: userId, name: '张三' });
    }, 1000);
  });
};

// 在组件中使用
const userInfo = useAsyncRef(fetchUserInfo);
// 模板中：<div v-if="userInfo.isLoading">加载中...</div><div v-else>{{ userInfo.value.name }}</div>