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這個文件會在你進入引入這個頁面的時候就去加載這個文件