依赖
webpack,import()语法
目标
首屏不展示的组件,在用户点击的时候去加载js,比如弹窗。
代码
<template>
<div>
<button @click="openDialog">打开弹窗</button>
<!-- 用于挂载元素的占位 -->
<div id="dialog"></div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
props:{},
data(){
return {
comp: {
dialog: null, // 保存对话框实例
}
}
},
methods: {
openDialog(){
// 下载弹窗js
import('./xxxDialog.vue').then(module => {
if(!comp.dialog){
let Dialog = Vue.extend(module.default);
this.comp.dialog = new Dialog().$mount('#dialog') // 挂载到dom上
}
}).then(() => {
this.comp.dialog.show();//打开对话框的方法
})
}
},
}
</script>
原理
- import() 的代码如果大于多少kb,在webpack中会独立打包出一个js。
- 使用import导入模块时,浏览器会请求该js,可以在then回调中获取js模块。
- 使用Vue.extend 构造器将对象转换为vue子类。Vue.extend官方文档
- new 实例化vue子类,得到vm,使用$mount(id) 挂载到dom上 。vm.$mount() 官方文档
- 保存实例化的vm在data中,防止重复实例化,且可用于访问实例方法。(如show方法)
结果
点击按钮,浏览器会发起请求