One way data binding updating parent from child

[bradesignstudio]

Version

2.4.2

Reproduction link

https://jsfiddle.net/ecgxykrt/

Steps to reproduce

1. Create a simple App component, that has an empty array called dataTest.
2. Create a simple Test component, that has a prop called dataTest.
3. Import and call the Test component on App component, passing dataTest on dataTest prop (one-way data-binding).
4. Create a mounted hook on Test, with a setTimeout pushing a value into the prop array.

What is expected?

The App component's dataTest could not be updated.

What is actually happening?

The App component's dataTest is being updated.

[minhtruong92]

I don't know what's happen, how can component update value ouside without $emit ?

[allenhwkim]

I think this jsfiddle implementation is against the pattern.

TL;DR; object or an array must not be updated in a child component.

As you see in this, if the value is re-assigned, you will seen a warning. https://jsfiddle.net/ecgxykrt/2/

1. props must not be updated. We should avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
2. props mutation is not caught because it's pushing an element into an array. Deep-level mutation does not cause any address change in Javascript world.

To make parent props change to be reflected to child components, I think Vue must keep its own address of a variable(I might be wrong on this). If Vue extend the variable, Vue also watch the change of parent value, which is not ideal.

It would be fantastic to find a way to avoid the deep-level object manipulation, but I don't think it's possible in any language without another performance cost.

[yyx990803]

^ what @allenhwkim said.

This has also been explicitly raised as a warning in docs.