异步组件
异步组件：只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。
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这个文件会在你进入引入这个页面的时候就去加载这个文件
