Dynamic components

When a page may need to display many different plug-ins using V-if or V-show greatly increases code redundancy and dom number so dynamically displaying required components can improve efficiency and performance

Before optimization The optimized

Use the Component tag to decide which component to display by receiving an IS attribute as the component name

When dynamic components were used to switch components, for example, an input component entered a character and then switched to another component and then switched back to the input component, the character entered before disappeared. Therefore, to solve this problem, keep-alive components were introduced to cache component contents

Asynchronous components

In large applications, we may need to break the application into smaller code blocks and load a module from the server only when needed. For simplicity, Vue allows you to define your component as a factory function that asynchronously parses your component definition. Vue fires the factory function only when the component needs to be rendered, and caches the result for future re-rendering