Data passed to prop of functional component still remains its parent dependency

[shameleo]

Version

2.3.4

Reproduction link

https://jsfiddle.net/be2j2z1p/

Steps to reproduce

Run & click buttons. Look through console logs.

What is expected?

When funcItems[1] object property changed, only one corresponding component should be re-rendered.

What is actually happening?

Whole parent component is re-rendered, inspite of it does not depend on changed property directly.

---

This is even worse when combined with #4037. If it is a known behavior I think it worth mentioning in docs, because using of functional components as items can ironically lead to performance degradation.

Note about my personal use case (if you wonder):
I try to create (actually, rewrite from Knockout) hierarchical table like this: https://jsfiddle.net/jybL9mve/. Each item must be aligned with the rest and it should be for visual flexibility.
I can't use to wrap corresponding levels, because nested are illegal in html.
So I can't use components, as they need single root. I hope this will change some day.
I can attach "expanded" flags to raw data. Not good, but acceptable. But now, each time user clicks to expand or collapse group / section, whole table re-renders. I tried to wrap group of items in functional component, but it doesn't help because of the current issue.
No good solutions.

[posva]

This is by design: functional components are rerendered every time something that can affects them changes. It can even be something unused by the parent component. The idea is that functional components aren't cached and don't track dependencies: https://jsfiddle.net/posva/4sdhcyg8/ (toggle val with the button and look at the console).

We are always to improve docs at the vuejs/vuejs.org repo. So, if you have suggestions, please tell us by opening an issue there with some thoughts, or even better, directly open a PR 🙂