Reactivity issue with computed on array first item

[clemator]

Version

3.5.13

Reproduction link

stackblitz.com

Steps to reproduce

Click on the button "Increment first array item" until the first array item object reach 5.

The computed "biggestNumber" is never recomputed, showing 4 instead of 5.

Click once on the second button "Increment second array item". The computed "biggestNumber" is now recomputed and displays 5 as expected.

Click on the first button, this time the computed is always recomputed on each clicks.

Click on the second button until it's value is superior to the first array item. Then click on the first one, it loses reactivity again.

This only happens to the first array item, redo steps with the first button and third or first and fourth.

What is expected?

The computed should react to changes on the first array item.

What is actually happening?

The first item never triggers computed reactivity until other array items changes.

---

Thank you for your work, love Vue <3

[skirtles-code]

I think the problem is that the first argument passed to reduce isn't wrapped in a proxy. e.g.:

reactive([{ a: 1 }, { b: 2 }]).reduce((c, d) => {
  console.log(c, d)
})

d is wrapped in a proxy, but c isn't.

• Playground

No initial value is being passed to reduce here, so the unwrapped first item in the array is treated as the initial value.

[danolu]

Your error is caused by how the reduce function is used.

"The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0)."

More can be found here.

If you don't want your program to skip the first execution, you must pass the optional initialValue as the second argument to your reduce function. Assuming that your values will be only positive integers, { "value": 0 } will be ideal as the initialValue argument.