Vue异步组件使用

目录

什么是异步组件？

没用异步组件和用异步组件的区别

没用异步组件 

 用异步组件

处理加载状态 loding...

---

什么是异步组件？

异步组件就是你需要这个组件的时候才会从服务器加载这个组件模块

比如后台管理系统，多选项来回切换，就可以使用异步组件

没用异步组件和用异步组件的区别

这里我用一个按钮控制 subs 组件是否显示

<template>
  <div id="app">
    <div>
      <h2>vue异步组件使用</h2>
    </div>
    <button @click="handle">按钮</button>
    <div v-if="isShow">
      <subs />
    </div>
  </div>
</template>


<script>
import Subs from './components/Sub'
export default {
  name: 'App',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handle () {
      console.log(this.isShow);
      this.isShow = !this.isShow
    }
  },
  components: {
    Subs
  }
}
</script>

 

没用异步组件 

可见组件在页面渲染时就 从服务器加载了 app.js 文件要比 使用异步组件的 app文件大

 用异步组件

使用异步组件 导入时，返回一个 Promise 

---

<template>
  <div id="app">
    <div>
      <h2>vue异步组件使用</h2>
    </div>
    <button @click="handle">按钮</button>
    <div v-if="isShow">
      <subs />
    </div>
  </div>
</template>

<script>
// import Subs from './components/Sub'
export default {
  name: 'App',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handle () {
      console.log(this.isShow);

      this.isShow = !this.isShow
    }
  },
  components: {
    // Subs
    //使用异步组件，并使用webpack修改相应文件名称 'res'
    // 这个动态导入会返回一个 `Promise` 对象
    Subs: () => import(/*webpackChunkName:"res"*/'./components/Sub')
  }
}
</script>

可见只有我在点击的时候才会 加载

处理加载状态 loding...

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