yann-usedefer

介绍

useDefer

maxCount默认值为100

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

import { useDefer } from 'yann-usedefer';

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


setTimeout(() => {
  // 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>

useDeferWatch

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

declare function useDeferWatch(maxCount: Ref<number> | number): {
  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
}

type DataType<T> = ListData<T> | Ref<ListData<T>> | MapData<T> | Ref<MapData<T>>

export declare function useDeferData<T>(data: DataType<T>): ComputedRef<ListData<T> | MapData<T>>

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>