vue2/vue3 Composition Api 常用工具集, @vueuse/core 之核心函数 array 实践

作者: tww844475003 分类: 前端开发 发布时间: 2023-08-15 22:21

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>
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注