V-if controls whether a VNode is generated, which indirectly controls whether a DOM is generated

  • V-if is true: the corresponding VNode is generated and the corresponding DOM element is generated
  • If v-if is false, the corresponding VNode will not be generated and the corresponding DOM element will not be generated naturally

V-show always generates vNodes, which indirectly results in always generating the corresponding DOM

  • If v-show is true, no processing is performed
  • If v-show is false, the display attribute is None

Using V-IF can effectively reduce nodes and render volume, but will lead to dom tree instability. With V-show, you can keep the tree stable, but not reduce the number of nodes and renders.

Therefore, in practical development, V-show is used when the display state changes frequently, and V-if is used when the display state changes little, so as to reduce the nodes and rendering amount of the tree.