This is the problem that Tencent will encounter in its 2020 school recruitment interview
Same point: all tags are hidden, and the corresponding tags still exist in the DOM structure
After the label is set to display: none, it will not occupy the original location of the label, and will trigger the re flow.
Label visibility: after hidden, it still occupies the original position and triggers redrawing.
Lenovo: V-IF and v-show
Same point: you can control the display and concealment of labels.
1、 Difference in essential methods of realization
- V-IF is to dynamically add or remove DOM elements into the DOM tree
- The essence of v-show is to use the display attribute of the tag to control the visibility and none
- V-IF = “false” the tag cannot be obtained in DOM
- V-show = false can still get the tag in DOM
2、 Differences in compilation
- V-show is actually controlling CSS
- The V-IF switch has a local compile / unload process. During the switch process, the event monitor and subcomponents inside the reconstruction are properly destroyed
3、 Compiled conditions
- V-show will compile, with the initial value of false, but the display is set to none, but it also compiles
- If the initial value of V-IF is false, it will not be compiled
- V-show only compiles once, and then controls CSS,
- Because V-IF is constantly destroyed and created, the performance of v-show is better
CSS3 property, set 0 to make an element completely transparent
Set a large left negative positioning so that the element is positioned outside the visible area