vuejs 如何实现组件懒加载

Question

很多时候，我们会把一些通用组件抽离出来成为组件，假如在app.vue 里面有以下3个modal

<template>
   <div id="app">
<!--      设置用户组织-->
      <set-user-org-modal v-model="displayOrgModal"/>
<!--      设置用户助理-->
      <set-user-assistant-moadal v-model="displayAssistantModal"/>
  </div>

我们一般使用v-model 显示和隐藏组件的时候，虽然组件没有显示，但是组件会加载到vuejs里面，结果导致这些组件多的时候。vuejs 首次渲染页面会特别特别慢，但是我又不想使用v-if，因为v-if 会多次销毁组件。也会导致性能下降

我的需求
当v-model 为true进行首次组件加载，然后缓存组件，下次打开模态框，直接走缓存，提示渲染速度

Answer 1

引自微信小程序：皆我百晓生：

1. 使用Vue.component进行组件的注册

首先，我们需要使用Vue.component全局注册组件，确保组件在使用前已经被加载。具体的代码如下：

Vue.component('set-user-org-modal', () => import('./components/SetUserOrgModal.vue'));
Vue.component('set-user-assistant-modal', () => import('./components/SetUserAssistantModal.vue'));

上述代码会注册两个组件SetUserOrgModal和SetUserAssistantModal，并且使用动态导入的方式加载组件。

2. 使用<keep-alive>组件进行缓存

接下来，我们使用<keep-alive>组件来缓存已经加载的组件，并在需要显示时进行缓存组件的渲染。

<template>
  <div id="app">
    <!-- 设置用户组织 -->
    <keep-alive>
      <component :is="currentModal" v-if="displayOrgModal || isCached('SetUserOrgModal')" />
    </keep-alive>
    <!-- 设置用户助理 -->
    <keep-alive>
      <component :is="currentModal" v-if="displayAssistantModal || isCached('SetUserAssistantModal')" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayOrgModal: false,
      displayAssistantModal: false,
      cachedComponents: [] // 用于存储已经缓存的组件
    };
  },
  computed: {
    currentModal() {
      // 根据不同的条件返回不同的组件
      if (this.displayOrgModal) {
        return 'SetUserOrgModal';
      } else if (this.displayAssistantModal) {
        return 'SetUserAssistantModal';
      }
      return null;
    }
  },
  methods: {
    isCached(componentName) {
      // 判断组件是否已经缓存
      return this.cachedComponents.includes(componentName);
    }
  },
  mounted() {
    // 在首次加载时，缓存组件
    this.cachedComponents.push('SetUserOrgModal', 'SetUserAssistantModal');
  }
};
</script>

在上面的代码中，通过<component>动态地绑定currentModal属性来显示当前需要显示的组件。在使用<keep-alive>组件包裹时，组件会被缓存并只渲染一次。在下一次打开模态框时，直接从缓存中获取组件并显示，提高了渲染速度。

同时，我们还提供了一个isCached方法来判断组件是否已经缓存，这样可以在切换模态框时控制组件的显示与隐藏。

希望以上内容对你有帮助！如果有任何疑问，请随时追问。