vue2.0异步组件

点击查看代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>异步组件</title>
    <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak></div>

<script>
    //全局异步组件  全局组件不需要在new Vue中进行注册的，直接使用
    // Vue.component("asyncComponent",(resolve,reject)=>{
    //     setTimeout(()=>{
    //         let VipComponent={
    //             template:`<div>我是全局异步组件</div>`
    //         }
    //         resolve(VipComponent);
    //     },2000)
    // });
    //局部异步组件  局部组件是需要在new Vue中进行注册的
    let asyncComponent=(resolve,reject)=>{
        setTimeout(()=>{
            resolve({
                template:`<div>我是局部异步组件</div>`
            })
        },100)
    }
    new Vue({
        el:"#app",
        data(){
            return {

            }
        },
        components:{
            asyncComponent
        },
        template:`
            <div>
                <async-component></async-component>
            </div>
        `,
        methods:{

        }
    })
</script>
</body>
</html>

总结：就是按需加载，不是一股脑全部加载，节省资源，提升性能。

posted @ 2022-01-10 20:44  是小李子哈  阅读(313)  评论(0)  编辑  收藏  举报