import { customRef } from 'vue';

// 工廠函數(shù)：接收初始值，返回 customRef 對象
function useBasicRef(initialValue) {
  let value = initialValue; // 閉包保存值

  return customRef((track, trigger) => {
    return {
      // 讀取值時觸發(fā)，調(diào)用 track() 收集依賴
      get() {
        track(); // 告訴 Vue 這個值被依賴（如模板中的 {{ value }}）
        console.log('獲取值:', value);
        return value;
      },
      // 修改值時觸發(fā)，調(diào)用 trigger() 通知更新
      set(newValue) {
        value = newValue; // 更新值
        console.log('設(shè)置值:', 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(); // 觸發(fā)更新
        }, 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); // 驗證數(shù)據(jù)
        if (validationResult === true) {
          value = newValue; // 驗證通過，更新值
          error = null;
        } else {
          error = validationResult; // 驗證失敗，保存錯誤信息
        }
        trigger(); // 觸發(fā)更新（視圖會顯示錯誤信息）
      }
    };
  });
}

// 驗證函數(shù)：檢查年齡是否在 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 }; // 返回值和加載狀態(tài)
      },
      set(newValue) {
        // 觸發(fā)異步操作（如獲取用戶信息）
        asyncFunction(newValue).then((data) => {
          value = data; // 更新值
          isLoading = false; // 結(jié)束加載
          trigger(); // 觸發(fā)更新
        }).catch((error) => {
          console.error('異步操作失敗:', error);
          isLoading = false; // 結(jié)束加載
          trigger(); // 觸發(fā)更新
        });
      }
    };
  });
}

// 模擬異步函數(shù)：獲取用戶信息
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>