vue中使用异步组件的步骤

1. 在components属性中引入组件
2. 在template中使用组件

<template>
	<div id="app">
		<div>
			<h1>
				Vue中异步组件的使用
			</h1>
			<button @click="show = !show">
				切换组件
			</button>
			<div v-if="show">
				<list></list>
			</div>
		</div>
	</div>
</template>

	export default {
	  name: 'App',
	  data () {
		return {
		  show: false
		}
	  },
	  components: {
		// 此处的webapckChunckName为webpack方法，值为引入js文件的name【List】
		List: () => import(/* webpackChunkName:"List" */ './components/List.vue')
	  },
	  methods:{
	  }
	}

Vue中使用组件中更细致的方法

1. 定义异步组件工厂函数
2. 导入需要的组件
3. 使用异步组件

<template>
	<div id="app">
		<div>
			<h1>
				Vue中异步组件的使用
			</h1>
			<button @click="show = !show">
				切换组件
			</button>
			<div v-if="show">
				<AsyncList></AsyncList>
			</div>
		</div>
	</div>
</template>

import LoadingComponent from './components/LoadingComponent.vue'
import ErrorComponent from './components/ErrorComponent.vue'
const AsyncList = () => ({
  component: import(/* webpackChunkName:"List" */ './components/List.vue'),
  // 加载的过程中使用loading组件
  loading: LoadingComponent,
  // 错误的状态
  error: ErrorComponent,
  // 加载组件的延迟时间，即loading组件展示时间
  delay: 200,
  // 延迟3s如果异步组件还未加载成功，则显示error组件
  timeout: 3000
})
export default {
  name: 'App',
  data () {
    return {
      show: false
    }
  },
  components: {
    AsyncList
  }
}

#app {
  width: 600px;
  height: 500px;
  margin: 200px auto;
  border: 1px solid greenyellow;
  border-radius: 5px;
  text-align: center;
}
#app h1 {
  font-size: 20px;
  color: yellowgreen;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ccc;
}
#app button {
  margin: 20px 0;
}