vue异步组件的使用

vue异步组件的使用

• 使用场景：你引入了一个子组件，子组件叫list，但这个list特别大，页面每次渲染的时候都会同步加载这个list，这样导致你页面特别卡，那有没有一种方法，可以让我在需要的时候才加载这个list呢？这就是异步组件的作用，可以按需加载组件。示例代码如下：

<template>
  <div>
    <div>home</div>
    <div @click="btn" class="btn11">按钮</div>
    <!-- 若是这样的话 一开始的时候 已经下载好这个组件了  network chunk-vendors.js -->
    <!-- <List v-if="flag" /> -->
    <!-- 再flag为true时，加载异步组件list 先加载loader 然后显示list组件 -->
    <div v-if="flag">
    	<AsyncComponent />
    </div>
  </div>
</template>

<script>
import LoadingComponent from './childCom/loadingComponents.vue'
import ErrorComponent from './childCom/ErrorComponents.vue'
// 异步组件 List组件 包含list、加载组件、错误组件
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import(/*webpackChunkName:'list'*/ './childCom/List.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

export default {
  name: 'Home',
  components: {
    AsyncComponent
  },
  data() {
    return {
      flag: false
    }
  },
  created() {},
  methods: {
    btn() {
      this.flag = !this.flag
    }
  }
}
</script>

如何设置浏览器的网络