动态组件
Vue.js 提供了一个特殊的元素
<component>
用来动态地挂载不同的组件,使用is
属性可以来设置要挂载的组件
应用场景:
异步组件
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。
- 项目的打包:
npm run build
- 项目根目录下生成一个
dist
文件夹css
:当前项目中所有打包后的样式文件js
:当前项目中所有打包后的js
文件app.js
所有src
目录下内容打包后的结果app.js.map
:上面文件的映射文件chunk.js
:所有第三方包打包后的文件chunk.js.map
:上面文件的映射文件
index.html
:项目的静态页面
- 项目根目录下生成一个
问题:
- 表现:打包之后的项目,运行之后,会一口气将当前项目中所有的文件全部加载出来
- 影响:第一次加载页面时会非常慢,用户体验不好。
- 解决方案:
- 可以使用异步组件来解决这个问题
用法:
- 同步组件:
- 导入方式:
import login from './login.vue'
- 特点:
- 在打包时,会一并打包到 app.js 中
- 请求页面时,会随着 app.js 一并请求出来
- 异步组件
- 导入方式:
const login = () => import('./login.vue')
- 特点:
- 在打包时,不会打包到 app.js 中,而是会单独打包为一个js 文件
- 请求页面时,只要在请求到时,才会加载出来
注意点:
- 如果用 vue 中的组件上,它的名称为:异步组件
- 如果用在路由上,它的名称为:路由的懒加载