Merging inherited data

[skirtles-code]

Version

3.0.0-rc.7

Reproduction link

https://jsfiddle.net/skirtle/p469rhax/7/

For comparison, Vue 2: https://jsfiddle.net/skirtle/eo2y9f3b/1/

What is expected?

The output should be John - 14.

What is actually happening?

The output is Liz - 14.

---

There are two differences from Vue 2:

1. Inherited properties in data are taking precedence over those of the component itself. A typical use case would be providing default values for data properties that can be overridden by the extending component.
2. In Vue 2 the merge was recursive, so objects within data were also merged. Personally I've never relied on this recursion but there are likely applications that do rely on it.

This is explicitly mentioned in the Vue 2 documentation:

For example, data objects undergo a recursive merge, with the component’s data taking priority in cases of conflicts.

This line still appears in the latest Vue 3 documentation.

Perhaps these changes are intentional but I couldn't find a relevant RFC.

A similar problem was discussed in #1187 but I see nothing there to suggest that this is an intentional change.

[yyx990803]

The merging behavior is rarely used and IMO it'd be better to stop supporting it, since it leads really implicit coupling that is hard to reason about. Will draft an RFC.