Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The child component clipped by v-if was rendered twice #10860

Closed
Linjovi opened this issue Nov 25, 2019 · 4 comments
Closed

The child component clipped by v-if was rendered twice #10860

Linjovi opened this issue Nov 25, 2019 · 4 comments

Comments

@Linjovi
Copy link

@Linjovi Linjovi commented Nov 25, 2019

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

This comment has been minimized.

Copy link

@lehui521 lehui521 commented Nov 25, 2019

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

This comment has been minimized.

Copy link
Member

@posva posva commented Nov 25, 2019

Duplicate of #10836

@posva posva marked this as a duplicate of #10836 Nov 25, 2019
@posva posva closed this Nov 25, 2019
@Linjovi

This comment has been minimized.

Copy link
Author

@Linjovi Linjovi commented Nov 25, 2019

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

This comment has been minimized.

Copy link

@lehui521 lehui521 commented Nov 25, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.