Detailed explanation of the method to achieve similar effects in

1. Use defineAsyncComponent to implement lazy loading

ProvideddefineAsyncComponentMethods, used to define asynchronous components, which can be used in conjunction with dynamic imports to enable lazy loading of components.

First, make sure you have Vue Router installed in the project:

npm install vue@next vue-router@4

Then, an asynchronous component can be defined as follows:

import { defineAsyncComponent } from 'vue';

// Use defineAsyncComponent and dynamic import to define a lazy load componentconst AsyncAbout = defineAsyncComponent(() =>
  import('./views/')
);

1.1 Using asynchronous components in routing

Once the asynchronous component is defined, you can use it in the routing configuration of Vue Router. This way, the component will be lazy to load when the corresponding route is first accessed, rather than when the application is started.

Reviserouter/Files to use asynchronous components:

import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';

const Home = () => import('../views/');
const AsyncAbout = defineAsyncComponent(() =>
  import('../views/')
);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: AsyncAbout
  }
];

const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes
});

export default router;

1.2 Add load status processing (optional)

defineAsyncComponentIt also allows you to specify options such as loading, timeout, error handling, and delayed loading. For example, you can define a load state component to display to the user when loading an asynchronous component:

const AsyncAbout = defineAsyncComponent({
  loader: () => import('./views/'),
  loadingComponent: LoadingComponent, // The component displayed in loading  errorComponent: ErrorComponent, // Components displayed when an error occurs  delay: 200, // Delay display of the time of loading components (milliseconds)  timeout: 3000 // Timeout time (milliseconds)});

This way, when the asynchronous component is loading, the user will seeLoadingComponentThe contents of the component, if loading fails (such as network problems or timeouts), will be displayedErrorComponentThe content of the component.

2. Use lazy loading in non-routing scenarios

The core idea of ​​lazy loading is "loading on demand", which is not limited to routing, but can also be applied to other scenarios, such as:

• Components are lazy to load:There may be some large components that are only needed after a specific operation, such as a dialog box that pops up after clicking a button. At this time, you can import it dynamically (import()) CombineddefineAsyncComponentLoad these components when needed.
• Lazy loading of images or resources:Images or other media resources on the page can also be lazy to load, and they are only loaded when they enter the viewport, which is especially useful when dealing with long lists or image-intensive pages.

2.1 Example: Components are lazy to load

Suppose there is a large chart componentLargeChart, only displays when the user performs an action (such as clicking a button), and can achieve lazy loading in this way:

import { defineAsyncComponent } from 'vue';

// Define an asynchronous componentconst AsyncLargeChart = defineAsyncComponent(() =>
  import('./components/')
);

export default {
  components: {
    AsyncLargeChart
  },
  data() {
    return {
      showChart: false
    };
  },
  methods: {
    toggleChart() {
       = !;
    }
  }
};

<template>
  <button @click="toggleChart">show/Hide chart</button>
  <AsyncLargeChart v-if="showChart"/>
</template>

In this example,LargeChartThe component is only inshowChartfortrue, that is, it will be loaded and rendered after the user clicks the button.

3. Conclusion

Although there is no directly equivalent to ReactFunctional, but throughdefineAsyncComponentand dynamic imports can easily implement lazy loading of components. This not only improves the performance of the application, but also improves the user experience, especially when loading large components or in environments with poor network conditions. Through appropriate loading status processing, we can also give users clear feedback during component loading to improve the overall quality of the application.

The above is a detailed explanation of the methods to achieve similar effects. For more information about achieving similar effects, please pay attention to my other related articles!