1---
2category: Array
3---
4 
5# useSorted
6 
7reactive sort array
8 
9## Usage
10 
11```ts
12import { useSorted } from '@vueuse/core'
13 
14// general sort
15const source = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
16const sorted = useSorted(source)
17console.log(sorted.value) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
18console.log(source) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
19 
20// object sort
21const objArr = [{
22  name: 'John',
23  age: 40,
24}, {
25  name: 'Jane',
26  age: 20,
27}, {
28  name: 'Joe',
29  age: 30,
30}, {
31  name: 'Jenny',
32  age: 22,
33}]
34const objSorted = useSorted(objArr, (a, b) => a.age - b.age)
35```
36 
37### dirty mode
38 
39dirty mode will change the source array.
40 
41```ts
42const source = ref([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
43const sorted = useSorted(source, (a, b) => a - b, {
44  dirty: true,
45})
46console.log(source)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
47```
48 
49## Type Declarations
50 
51```ts
52export type UseSortedCompareFn<T = any> = (a: T, b: T) => number
53export type UseSortedFn<T = any> = (
54  arr: T[],
55  compareFn: UseSortedCompareFn<T>,
56) => T[]
57export interface UseSortedOptions<T = any> {
58  /**
59   * sort algorithm
60   */
61  sortFn?: UseSortedFn<T>
62  /**
63   * compare function
64   */
65  compareFn?: UseSortedCompareFn<T>
66  /**
67   * change the value of the source array
68   * @default false
69   */
70  dirty?: boolean
71}
72/**
73 * reactive sort array
74 *
75 * @see https://vueuse.org/useSorted
76 */
77export declare function useSorted<T = any>(
78  source: MaybeRefOrGetter<T[]>,
79  compareFn?: UseSortedCompareFn<T>,
80): Ref<T[]>
81export declare function useSorted<T = any>(
82  source: MaybeRefOrGetter<T[]>,
83  options?: UseSortedOptions<T>,
84): Ref<T[]>
85export declare function useSorted<T = any>(
86  source: MaybeRefOrGetter<T[]>,
87  compareFn?: UseSortedCompareFn<T>,
88  options?: Omit<UseSortedOptions<T>, "compareFn">,
89): Ref<T[]>
90```
91