Close read Vue official documentation series 🎉

component

Equivalent to a placeholder for a component. Dynamically render the matched components based on the IS Attribute.

transition

The
component can apply transition effects to individual elements/components, and it only applies transition effects to its wrapped content, without producing additional DOM elements that are rendered.

transition-group

FLIP based simple animation queue to achieve list (multiple elements, multiple components) transition. Unlike the
component, the
generates an additional wrapped DOM, which is a span by default and can be customized using tag attributes.

Note that each child node of the
must have a separate key for the animation to work properly

keep-alive

The

component can preserve component state or avoid re-rendering.



  • <keep-alive>Can only be used when one of its immediate children is switched on or off, i.e. only one child can be rendered at a time. If you have in itv-forThey won’t work.
  • Functional components cannot be cached because they have no instances.


can only display elements in the keep-alive tree. If you put multiple elements inside the

component, only one element can be displayed at a time, and the others are hidden by keep-alive by default.

When the

component switches cached components, the activated and Deactivated life cycle functions of the component are triggered.

slot

Defines a slot to receive and distribute content transferred from the component’s parent scope. A named slot can be defined by name. ScopedSlots can be defined by v-slot:name=””

template

We usually group our template content by wrapping our template elements with a

Note that