useSorted

反应式排序数组

¥reactive sort array

示例

源代码演练场

input:

output: [ "13", "19", "22", "23", "27", "34", "56", "56", "60", "71", "85", "92", "97" ]

object property sort:

input:

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

output:

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

用法

¥Usage

import { useSorted } from '@vueuse/core'

// general sort
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]

// object sort
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 mode

脏模式会改变源数组。

¥dirty mode will change the source array.

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)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10