feat(useArrayDifference): new function

packages/shared/index.ts

@@ -31,6 +31,7 @@ export * from './tryOnMounted'
 export * from './tryOnScopeDispose'
 export * from './tryOnUnmounted'
 export * from './until'
+export * from './useArrayDifference'
 export * from './useArrayEvery'
 export * from './useArrayFilter'
 export * from './useArrayFind'

packages/shared/useArrayDifference/index.md

@@ -0,0 +1,33 @@
+---
+category: Array
+---
+
+# useArrayDifference
+
+Reactive get array difference of two array
+
+## Usage
+
+### Use with reactive array
+
+```js
+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)
+// result.value: [0, 1, 2, 3]
+list2.value = [0, 1, 2]
+// result.value: [3, 4, 5]
+```
+
+### Use with reactive array and use function comparison
+
+```js
+import { useArrayDifference } from '@vueuse/core'
+
+const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
+
+const result = useArrayDifference(list1, list2, value => a.id)
+// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]
+```

packages/shared/useArrayDifference/index.test.ts

@@ -0,0 +1,35 @@
+import { ref } from 'vue-demi'
+import { useArrayDifference } from './index'
+
+describe('useArrayDifference', () => {
+  it('should be defined', () => {
+    expect(useArrayDifference).toBeDefined()
+  })
+  it('should return the difference of two array', () => {
+    const list1 = ref([1, 2, 3, 4, 5])
+    const list2 = ref([4, 5, 6])
+
+    const result = useArrayDifference(list1, list2)
+    expect(result.value).toEqual([1, 2, 3])
+
+    list2.value = [1, 2, 3]
+    expect(result.value).toEqual([4, 5])
+
+    list1.value = [1, 2, 3]
+    expect(result.value).toEqual([])
+  })
+
+  it('should return the difference of two array with iteratee', () => {
+    const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+    const list2 = ref([{ id: 4 }, { id: 5 }])
+
+    const result = useArrayDifference(list1, list2, x => x.id)
+    expect(result.value).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }])
+
+    list2.value = [{ id: 1 }, { id: 2 }, { id: 3 }]
+    expect(result.value).toEqual([{ id: 4 }, { id: 5 }])
+
+    list1.value = [{ id: 1 }, { id: 2 }, { id: 3 }]
+    expect(result.value).toEqual([])
+  })
+})

packages/shared/useArrayDifference/index.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef } from 'vue-demi'
+import { computed } from 'vue-demi'
+import type { MaybeComputedRef } from '../utils'
+import { resolveUnref } from '../resolveUnref'
+
+function differenceBy<T>(
+  array: T[],
+  other: T[],
+  fn: (value: T) => unknown,
+) {
+  return array.filter(c => !other.map(fn).includes(fn(c)))
+}
+
+/**
+ * Reactive get array difference of two array
+ * @see https://vueuse.org/useArrayDifference
+ * @param {Array} list - the array was called upon.
+ * @param {Array} values - the array was called upon.
+ * @param {Function} [fn] - the iteratee invoked per element.
+ * @returns {Array} - the difference of two array
+ */
+export function useArrayDifference<T>(list: MaybeComputedRef<T[]>, values: MaybeComputedRef<T[]>, fn?: (value: T) => unknown): ComputedRef<T[]> {
+  if (fn)
+    return computed(() => differenceBy(resolveUnref(list), resolveUnref(values), fn))
+  return computed(() => resolveUnref(list).filter(x => !resolveUnref(values).includes(x)))
+}