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

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。