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>

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


__EOF__

本文作者：是小李子哈
本文链接：https://www.cnblogs.com/lihongyun/p/15785872.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   是小李子哈  阅读(318)  评论(0)  编辑  收藏  举报
相关博文：
·  vue2.0动态路由相关
·  CSS选择器
·  Vue2：异步组件
·  vue的异步组件
·  vue按需加载组件,异步组件
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· .NET Core 中如何实现缓存的预热？
· 三行代码完成国际化适配，妙~啊~
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
点击右上角即可分享
微信分享提示
SQL AI 助手