reactiveArray.bench.ts 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import { bench } from 'vitest'
  2. import { computed, reactive, readonly, shallowRef, triggerRef } from '../src'
  3. for (let amount = 1e1; amount < 1e4; amount *= 10) {
  4. {
  5. const rawArray = []
  6. for (let i = 0, n = amount; i < n; i++) {
  7. rawArray.push(i)
  8. }
  9. const r = reactive(rawArray)
  10. const c = computed(() => {
  11. return r.reduce((v, a) => a + v, 0)
  12. })
  13. bench(`reduce *reactive* array, ${amount} elements`, () => {
  14. for (let i = 0, n = r.length; i < n; i++) {
  15. r[i]++
  16. }
  17. c.value
  18. })
  19. }
  20. {
  21. const rawArray = []
  22. for (let i = 0, n = amount; i < n; i++) {
  23. rawArray.push(i)
  24. }
  25. const r = reactive(rawArray)
  26. const c = computed(() => {
  27. return r.reduce((v, a) => a + v, 0)
  28. })
  29. bench(
  30. `reduce *reactive* array, ${amount} elements, only change first value`,
  31. () => {
  32. r[0]++
  33. c.value
  34. },
  35. )
  36. }
  37. {
  38. const rawArray = []
  39. for (let i = 0, n = amount; i < n; i++) {
  40. rawArray.push(i)
  41. }
  42. const r = reactive({ arr: readonly(rawArray) })
  43. const c = computed(() => {
  44. return r.arr.reduce((v, a) => a + v, 0)
  45. })
  46. bench(`reduce *readonly* array, ${amount} elements`, () => {
  47. r.arr = r.arr.map(v => v + 1)
  48. c.value
  49. })
  50. }
  51. {
  52. const rawArray = []
  53. for (let i = 0, n = amount; i < n; i++) {
  54. rawArray.push(i)
  55. }
  56. const r = shallowRef(rawArray)
  57. const c = computed(() => {
  58. return r.value.reduce((v, a) => a + v, 0)
  59. })
  60. bench(`reduce *raw* array, copied, ${amount} elements`, () => {
  61. r.value = r.value.map(v => v + 1)
  62. c.value
  63. })
  64. }
  65. {
  66. const rawArray: number[] = []
  67. for (let i = 0, n = amount; i < n; i++) {
  68. rawArray.push(i)
  69. }
  70. const r = shallowRef(rawArray)
  71. const c = computed(() => {
  72. return r.value.reduce((v, a) => a + v, 0)
  73. })
  74. bench(`reduce *raw* array, manually triggered, ${amount} elements`, () => {
  75. for (let i = 0, n = rawArray.length; i < n; i++) {
  76. rawArray[i]++
  77. }
  78. triggerRef(r)
  79. c.value
  80. })
  81. }
  82. }