yann-usedefer

介绍

useDefer

maxCount默认值为100

declare function useDefer(
  maxCount?: number,
  cumulativeFunction?: (num: number) => number
): {
  defer: (count: number) => boolean
  updateMaxCount: (newMaxCount: number) => void
  index: Readonly<Ref<number>>
  resetDefer: () => void
}

import { useDefer } from 'yann-usedefer';

const list = ref(100)
const { defer, updateMaxCount, resetDefer } = useDefer(list.value);


setTimeout(() => {
  // 如果你需要重置
  resetDefer();
  // 3s后更新
  list.value = 200
  updateMaxCount(list.value);
},3000)

<template>
  <div class="main">
    <div class="box" v-for="n in list" :key="n">
      <div class="item" v-if="defer(n)"></div>
    </div>
  </div>
</template>


// 示例二：
const { defer, updateMaxCount } = useDefer(list.value, (num) => {
  return num + 2
});

useDeferWatch

useDeferWatch函数接受一个Ref或者一个number类型的值，如果传入的值是一个Ref，那么useDeferWatch会监听这个Ref的变化，如果传入的是一个number类型的值，那么useDeferWatch会直接使用这个值。

declare function useDeferWatch(
  maxCount: Ref<number> | number,
  cumulativeFunction?: (num: number) => number,
  config?: {
    reset: boolean
  }
): {
  defer: (count: number) => boolean
  index: Readonly<Ref<number>>
}

import { useDeferWatch } from 'yann-usedefer';

const list = ref(100)
const val = computed(() => {
  return list.value
})

const { defer } = useDeferWatch(val);


setTimeout(() => {
  list.value = 200
},3000)

<template>
  <div class="main">
    <div class="box" v-for="n in list" :key="n">
      <div class="item" v-if="defer(n)"></div>
    </div>
  </div>
</template>

useDeferData

useDeferData 函数接受一个数组或者对象或者Ref的数组或者对象，返回一个计算属性的数组或者对象

type ListData<T> = Array<T>

interface MapData<T> {
  [k: string | symbol]: T
}

declare function useDeferData<T, K extends MapData<T> | ListData<T>>(
  data: K | Ref<K>,
  cumulativeFunction?: (num: number) => number,
  config?: {
    reset: boolean
  }
): ComputedRef<K>

import { useDeferData } from 'yann-usedefer';

const list = ref([1,2,3])
const data = useDeferData(list)


<template>
  <div class="main">
    <div class="box" v-for="n in data" :key="n">
      <div class="item"></div>
    </div>
  </div>
</template>