vue同步组件和异步组件的区别

异步组件

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