Vue3 响应式高阶用法之customRef()的使用

<script lang="ts" setup>
import { customRef } from 'vue';

function debouncedRef(initialValue, delay) {
  let timeoutId;
  return customRef((track, trigger) => ({
    get() {
      // 使用 track 函数标记依赖
      track();
      return initialValue;
    },
    set(newValue) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        initialValue = newValue;
        // 使用 trigger 函数触发依赖更新
        trigger();
      }, delay);
    }
  }));
}

// 使用自定义的ref
const myDebouncedRef = debouncedRef('Hello World', 500);
</script>

<script lang="ts" setup>
import { customRef } from 'vue';

function asyncRef(initialValue, asyncFunction) {
  return customRef((track, trigger) => ({
    get() {
      track();
      return initialValue;
    },
    async set(newValue) {
      initialValue = await asyncFunction(newValue);
      trigger();
    }
  }));
}

// 使用自定义的ref
const myAsyncRef = asyncRef('Initial Value', async (value) => {
  // 模拟异步操作
  await new Promise(resolve => setTimeout(resolve, 1000));
  return value.toUpperCase();
});
</script>

<script lang="ts" setup>
import { customRef } from 'vue';

function conditionalRef(initialValue, conditionFunction) {
  return customRef((track, trigger) => ({
    get() {
      track();
      return initialValue;
    },
    set(newValue) {
      if (conditionFunction(newValue)) {
        initialValue = newValue;
        trigger();
      }
    }
  }));
}

// 使用自定义的ref
const myConditionalRef = conditionalRef(0, value => value >= 0);
</script>