当前位置：首页 > news >正文

如果vue加载页面的时候，需要加载很多子vue ，能不能先加载一个，让页面处于能用的状态，多余的在后台加载。

news 来源：原创 2025/5/20 3:24:16

1. 使用 v-if 条件渲染

v-if 指令可以根据条件来决定是否渲染组件，利用这个特性可以先渲染一个必要的子组件，其余组件在合适的时机再渲染。

示例代码

<template>
  <div>
    <!-- 先加载的子组件 -->
    <FirstComponent />
    <!-- 其余子组件根据条件渲染 -->
    <SecondComponent v-if="isSecondLoaded" />
    <ThirdComponent v-if="isThirdLoaded" />
    <button @click="loadMoreComponents">加载更多组件</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
import ThirdComponent from './ThirdComponent.vue';

export default {
  components: {
    FirstComponent,
    SecondComponent,
    ThirdComponent
  },
  data() {
    return {
      isSecondLoaded: false,
      isThirdLoaded: false
    };
  },
  methods: {
    loadMoreComponents() {
      this.isSecondLoaded = true;
      this.isThirdLoaded = true;
    }
  }
};
</script>

代码解释

页面加载时，FirstComponent 会被直接渲染，用户可以与该组件进行交互，让页面处于可用状态。
SecondComponent 和 ThirdComponent 初始时 v-if 条件为 false，不会被渲染。
当用户点击加载更多组件按钮时，loadMoreComponents 方法会将 isSecondLoaded 和 isThirdLoaded 设置为 true，从而渲染这两个组件。

2. 使用动态组件和异步组件

Vue 支持动态组件和异步组件，结合这两个特性可以实现子组件的按需加载。
示例代码

<template>
  <div>
    <!-- 先加载的子组件 -->
    <component :is="currentComponent" />
    <button @click="loadMoreComponents">加载更多组件</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';

// 异步组件
const SecondComponent = () => import('./SecondComponent.vue');
const ThirdComponent = () => import('./ThirdComponent.vue');

export default {
  data() {
    return {
      currentComponent: FirstComponent,
      componentsToLoad: [SecondComponent, ThirdComponent]
    };
  },
  methods: {
    loadMoreComponents() {
      if (this.componentsToLoad.length > 0) {
        this.currentComponent = this.componentsToLoad.shift();
      }
    }
  }
};
</script>

代码解释

页面加载时，currentComponent 初始值为 FirstComponent，所以先渲染该组件。
SecondComponent 和 ThirdComponent 是异步组件，使用 import() 语法实现懒加载。
当用户点击加载更多组件按钮时，loadMoreComponents 方法会从 componentsToLoad 数组中取出一个组件并赋值给 currentComponent，从而渲染该组件。

3.使用 Vue.lazy（Vue 3 组合式 API）

在 Vue 3 中，可以使用 Vue.lazy 函数来创建异步组件，实现更简洁的按需加载。

示例代码

<template>
  <div>
    <!-- 先加载的子组件 -->
    <FirstComponent />
    <!-- 其余子组件按需加载 -->
    <component :is="secondComponent" v-if="isSecondLoaded" />
    <component :is="thirdComponent" v-if="isThirdLoaded" />
    <button @click="loadMoreComponents">加载更多组件</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FirstComponent from './FirstComponent.vue';

// 异步组件
const secondComponent = () => import('./SecondComponent.vue');
const thirdComponent = () => import('./ThirdComponent.vue');

const isSecondLoaded = ref(false);
const isThirdLoaded = ref(false);

const loadMoreComponents = () => {
  isSecondLoaded.value = true;
  isThirdLoaded.value = true;
};
</script>

代码解释

与前面的示例类似，页面先渲染 FirstComponent。
secondComponent 和 thirdComponent 是异步组件，通过 import() 实现懒加载。
当用户点击按钮时，loadMoreComponents 方法会将 isSecondLoaded 和 isThirdLoaded 设置为 true，从而渲染这两个组件。

通过以上方法，可以在 Vue 中实现先加载一个子组件让页面可用，其余子组件在后台或按需加载的效果。