vue2/vue3 Composition Api 常用工具集， @vueuse/core 之核心函数 array 实践
useArrayDifference
Reactive get array difference of two array
<script lang="ts" setup>
import { ref } from 'vue'
import { useArrayDifference } from '@vueuse/core'
const list1 = ref([0, 1, 2, 3, 4, 5])
const list2 = ref([4, 5, 6])
const result = useArrayDifference(list1, list2)
const list3 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
const list4 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
const result2 = useArrayDifference(list3, list4, (value, othVal) => value.id === othVal.id)
</script>
<template>
<div>
<h2>result</h2>
{{ result }}<br />
<h2>result2</h2>
{{ result2 }}
</div>
</template>useArrayEvery
响应式 Array.every
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayEvery } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayEvery(listRef, i => i % 2 === 0)
const updateRef = () => {
item1.value = 1
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayEvery(listReactive, i => i % 2 === 0)
const updateReactive = () => {
listReactive.push(3)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayFilter
Reactive Array.filter
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayFilter } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayFilter(listRef, i => i % 2 === 0)
const updateRef = () => {
item1.value = 1
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayFilter(listReactive, i => i % 2 === 0)
const updateReactive = () => {
listReactive.push(3)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayFind
Reactive Array.find.
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayFind } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayFind(listRef, val => val > 0)
const updateRef = () => {
item1.value = 1
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayFind(listReactive, val => val > 0)
const updateReactive = () => {
listReactive.unshift(1)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayFindIndex
Reactive Array.findIndex
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayFindIndex } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayFindIndex(listRef, val => val % 2 === 0)
const updateRef = () => {
item1.value = 1
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayFindIndex(listReactive, val => val % 2 === 0)
const updateReactive = () => {
listReactive.unshift(1)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayFindLast
Reactive Array.findLast.
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayFindLast } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayFindLast(listRef, val => val % 2 === 0)
const updateRef = () => {
item2.value = 6
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayFindLast(listReactive, val => val % 2 === 0)
const updateReactive = () => {
listReactive.push(6)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayJoin
Reactive Array.join
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayJoin } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayJoin(listRef)
const updateRef = () => {
item2.value = 6
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayJoin(listReactive)
const updateReactive = () => {
listReactive.push(6)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayMap
Reactive Array.map
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayMap } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayMap(listRef, val => val * 2)
const updateRef = () => {
item2.value = 6
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayMap(listReactive, val => val * 2)
const updateReactive = () => {
listReactive.push(6)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayReduce
Reactive Array.reduce.
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayReduce } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayReduce(listRef, (sum, val)=> sum + val)
const updateRef = () => {
item2.value = 6
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayReduce(listReactive, (sum, val) => sum + val)
const updateReactive = () => {
listReactive.push(6)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArraySome
Reactive Array.some
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArraySome } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArraySome(listRef, val => val > 10)
const updateRef = () => {
item2.value = 11
}
const listReactive = reactive([2, 4])
const resultReactive = useArraySome(listReactive, val => val > 10)
const updateReactive = () => {
listReactive.push(11)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useArrayUnique
reactive unique array
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useArrayUnique } from '@vueuse/core'
const item1 = ref(2)
const item2 = ref(4)
const listRef = [item1, item2]
const resultRef = useArrayUnique(listRef)
const updateRef = () => {
item2.value = 6
}
const listReactive = reactive([2, 4])
const resultReactive = useArrayUnique(listReactive)
const updateReactive = () => {
listReactive.push(6)
}
</script>
<template>
<div class="array">
<h2>ref</h2>
{{ resultRef }} <button @click="updateRef">更改</button><br />
<h2>reactive</h2>
{{ resultReactive }} <button @click="updateReactive">更改</button>
</div>
</template>useSorted
reactive sort array
<script lang="ts" setup>
import { useSorted } from '@vueuse/core'
const arr = [2, 1, 3, 5, 4, 6]
const sorted = useSorted(arr)
console.log('sorted.value', sorted.value)
console.log('sorted', sorted)
const objArr = [
{
name: 'node.js',
score: 80
},
{
name: 'react.js',
score: 75
},
{
name: 'vue.js',
score: 70
},
{
name: 'angular.js',
score: 65
}
]
const objSorted = useSorted(objArr, (a, b) => a.score - b.score)
</script>
<template>
<div>
<h2>sorted</h2>
{{ sorted }}<br/>
<h2>obj sorted</h2>
{{ objSorted }}
</div>
</template>
