State will be saved when using two same components with v-if

[SidKwok]

Version

2.5.16

Reproduction link

https://jsfiddle.net/50wL7mdz/208710/

Steps to reproduce

1. A component with state
2. Render two same components with v-if

What is expected?

The two components should be different.

What is actually happening?

State will change.

---

v-show is ok

[LinusBorg]

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

[fnlctrl]

@LinusBorg I remember components are not reused by default, at least for versions prior to 2.5.16... If this
behavior change was intentional it probably should be documented.

[LinusBorg]

This is not new behaviour. vue always re-used components in this situation, just like it does in a v-for where you splice the array.

[fnlctrl]

Right... I tested with older versions and the behavior is the same, though I still think this is surprising behavior because component state is reused - instead of just DOM state, as indicated by the document.

[LinusBorg]

Yes, it can be surprising to new users, but is expected for anyone familiar with the virtual dom implementation, I also think we talk about it in the section that explains when to use key with v-for, but not in the context of v-if.

So we should improve the docs about this effect in the vuejs.org repository.

Here, the issue can be closed.