useSorted

类别

Array

导出体积

309 B

上次更改

6 months ago

响应式排序数组

示例

源码 playground (beta)

输入：

输出：[ "3", "10", "13", "33", "35", "43", "55", "57", "62", "65", "73", "74", "75", "99" ]

对象属性排序：

输入：

[ { "name": "John", "age": 40 }, { "name": "Jane", "age": 20 }, { "name": "Joe", "age": 30 }, { "name": "Jenny", "age": 22 } ]

输出：

[ { "name": "Jane", "age": 20 }, { "name": "Jenny", "age": 22 }, { "name": "Joe", "age": 30 }, { "name": "John", "age": 40 } ]

用法

import { useSorted
 } from '@vueuse/core'

// 一般排序
const source
 = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
const sorted
 = useSorted
(source
)
console
.log
(sorted
.value
) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console
.log
(source
) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]

// 对象排序
const objArr
 = [{
  name
: 'John',
  age
: 40,
}, {
  name
: 'Jane',
  age
: 20,
}, {
  name
: 'Joe',
  age
: 30,
}, {
  name
: 'Jenny',
  age
: 22,
}]
const objSorted
 = useSorted
(objArr
, (a
, b
) => a
.age
 - b
.age
)

`dirty` 模式

dirty 模式将改变源数组。

const source
 = ref
([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
const sorted
 = useSorted(source
, (a
, b
) => a
 - b
, {
  dirty
: true,
})
console
.log
(source
)// 输出: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

类型声明

export type UseSortedCompareFn
<T
 = any> = (a
: T
, b
: T
) => number
export type UseSortedFn
<T
 = any> = (
  arr
: T
[],
  compareFn
: UseSortedCompareFn
<T
>,
) => T
[]
export interface UseSortedOptions
<T
 = any> {
  /**
   * 排序算法
   */
  sortFn
?: UseSortedFn
<T
>
  /**
   * 比较函数
   */
  compareFn
?: UseSortedCompareFn
<T
>
  /**
   * 更改源数组的值
   * @default false
   */
  dirty
?: boolean
}
/**
 * reactive sort array
 *
 * @see https://vueuse.org/useSorted
 */
export declare function useSorted
<T
 = any>(
  source
: MaybeRefOrGetter
<T
[]>,
  compareFn
?: UseSortedCompareFn
<T
>,
): Ref
<T
[]>
export declare function useSorted
<T
 = any>(
  source
: MaybeRefOrGetter
<T
[]>,
  options
?: UseSortedOptions
<T
>,
): Ref
<T
[]>
export declare function useSorted
<T
 = any>(
  source
: MaybeRefOrGetter
<T
[]>,
  compareFn
?: UseSortedCompareFn
<T
>,
  options
?: Omit
<UseSortedOptions
<T
>, "compareFn">,
): Ref
<T
[]>