The child component clipped by v-if was rendered twice

[Linjovi]

Version

2.5.22

Reproduction link

https://codesandbox.io/embed/vue-template-b6c06?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

When the initial value of a is equal to true and b is equal to false, the child component was created twice.
When the initial value of a is equal to false and b is equal to true, the child component was created once.
When the initial value of a and b are same, the child component was created twice.

What is expected?

The child component is created the same number of times in different cases

What is actually happening?

The child component is created the different number of times in different cases

[lehui521]

I just tried to replace v-if with v-show to achieve the desired effect, which shows the re-rendering problem caused by v-if

[posva]

Duplicate of #10836

[Linjovi]

Duplicate of #10836

I know the difference between v-show and v-if, I also know that adding a key will solve the problem. But why changing the initial values of a and b will have different results when there is no key?

[lehui521]

My English is not very good, so I cannot elaborate in detail. However, you can look at the Diff algorithm of vue's virtual DOM. Key is used as a unique identifier, and there is a difference between having and not having