异步组件
异步组件：只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。
Vue实现按需加载 在打包的时候，会打包成单独的js文件存储在static/js文件夹里面**
在调用时使用ajax请求回来插入到html中。
调用异步组件的方法
异步组件中，如果父组件调用子组件，需要给一个延时。可以用setTimeOut来处理。
同步组件中：如果父组件调用子组件，不需要延时，可以直接去调用。
通过this.$refs.XXX.方法名
在使用该方法时，子组件身上一定不要使用v-if；否者会出现undefined
父组件调用子组件并且传值可以使用这个方法
使用props父组件向子组件传递一个值
然后使用延时 settimeout(()=>{
this.$refs.XXX.方法名();//这样就可以了
},400)
异步组件结合v-if提升首页渲染速度
<template>
<div>
<div @click="showHander">显示组件</div>
<testcom v-if="show"></testcom>
</div>
</template>
<script>
export default {
data(){
return{
show:false,
}
},
methods:{
showHander(){
this.show=!this.show;
},
},
components:{
testcom:()=>import(/* webpackChunkName:"lhtest" */'../components/test-com')
}
}
</script>
发生的现象
因为我们使用了v-if结合异步组件加载
在页面第一次渲染的时候
并不会直接去加载testcom这个组件
而是页面需要渲染的时候
才会去加载这个组件
/* webpackChunkName:"lhtest" */ 这个是webpack的魔法注释
如果我们不是使用的v-if，而是使用的v-show;
那么会出现的现象是：lhtest.js这个文件会在你进入引入这个页面的时候就去加载这个文件
作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
支付宝
微信
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。