How vue uses dynamic components to lazily load components

This article mainly introduces vue how to use dynamic components to lazily load components, the article is very detailed, has a certain reference value, interested friends must read it!

Use dynamic components to lazily load components

Components are loaded synchronously, but when there is a lot of content on the page, some components do not need to be loaded from the beginning, such as pop-up components, these can be loaded out with dynamic components, and then loaded out after the user has performed certain operations, which can improve the performance of the main module loading. In Vue, component dynamic components can be used to determine which component is rendered according to the value of is.

Main page Click recording component 1 Click recording component 2 import {Component, Vue} from 'vue-property-decorator';@Component ({}) export default class AsyncComponent extends Vue {public child1:Component = null; public child2:Component = null; handleClick1 () {this.child1 = require ('. / child1'). Default;} handleClick2 () {this.child2 = require ('. / child2'). Default;}}

In the sample code, the component is loaded only when clicked. Component can also cooperate with v-show to control display and hiding, so that the component will only mounted once to optimize performance.

These are all the contents of the article "how vue uses dynamic components to load components lazily". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!