Component watcher fired multiple times when passing props as array (in the template)

[gilles-crealp]

Version

2.5.21

Reproduction link

https://jsfiddle.net/eywraw8t/510740/

Steps to reproduce

Go to the reproduction link, run the code and watch the console.

What is expected?

First watcher (watcher one (A)) to be called only once.

What is actually happening?

First watcher (watcher one (A)) is called twice (at the same time that the second prop is modified).

---

Happens only when you pass a prop changed to array in the template.

[LinusBorg]

This happens because you create a fresh array directly in the parent's template. Which means that everytime the parent re-renders (i.e. when you change valueTwo), ComponentOne receives a new array, which triggers the watcher, because ['A'] != ['A'].

If you define the array in the paren'ts data and pass it down, that would not happen.

See: https://jsfiddle.net/Linusborg/xjp4k60m/

[gilles-crealp]

Thx for the explanation of the why of the problem. I didn't know that the template fully re-render on modification (witch seem logical after reading).