Vue神技：动态加载、懒加载组件一网打尽

怎样用Vue玩儿转应用程序？得先知道怎么聪明地换动态加载和懒加载组件。动态加载就像先看看再说要不要导入组件；懒加载就像是需要才把组件代码拉过来，这样网页载入就能更快点儿。别急，这篇文章教会你怎么在Vue中用上动态加载和懒加载组件，还有实操例子

一、动态加载组件

1.使用v-if指令

用 Vue 的v-if 指令，想给谁看什么就看着什么，不想给谁看什么就藏着呗。比如说，有个用户登录进来成功了，那咱们就能按需开关小部件咯~

html

搞定，直接把登录成功的那个页面从'./LoginSuccess.vue'那儿拷贝过来就行了！
从我们的LoginForm组件中导入LoginForm。
export default {
  data(){
    return {
      loggedIn: false
    };
  

    

      
    
    

      
    
  


import LoginSuccess from './LoginSuccess.vue';
import LoginForm from './LoginForm.vue';
export default {
  data() {
    return {
      loggedIn: false
    }
  },
  components: {
    LoginSuccess,
    LoginForm
  }
}


  }
}

咱们这个代码，就用来瞅瞅 loggedIn 是啥玩意儿，然后再看看你有没有登入。接着它就会根据这个信息来展示正确的组件！

2.使用动态组件

今天咱们就来讲讲咋不用v-if指令也能动态加载Vue组件吧～你选啥都能秒速加上相应组件！

它就是从’./ComponentA.vue’复制到这儿的那个’ComponentA’~

  

    
    

      
Home
      
About
      
Contact
    
  


import Home from './Home.vue';
import About from './About.vue';
import Contact from './Contact.vue';
export default {
  data() {
    return {
      currentComponent: 'Home'
    }
  },
  components: {
    Home,
    About,
    Contact
  }
}


他们把咱们的B模块偷跑到’./ ComponentB.vue’那儿去了。

目前的组件就是”ComponentA”

},

  components:{

    ComponentA,

    ComponentB

你看，就是这个”is”属性在这边搞的鬼，让网页上的组件能随时更换！所以说，你想装啥组件就选啥，随你心意！

二、懒加载组件

懒加载就是让网页更快！每次加载只放我们要看见的组件。

1.异步组件

在vue里头儿，要搞定懒加载组件，其实很容易就能实现了～仅仅运用Webpack强大的代码分割功能即可~具体咋整？这可太简单！你只需要用import()函数，想加载哪个组件就加载哪个，so easy！

“`javascript

// 使用import()函数来异步加载组件
const AsyncComponent = () => import('./AsyncComponent.vue');

知道么？我们这儿有个超牛的软件叫做AsyncComponent！它可以直接帮你把那个啥”./AsyncComponent.vue”文件加载过来！

别傻乎乎地把AsyncComponent和首页搅合在一起，给它安个家。真正要用时再拿出来，不仅方便还能拉风！

2. Vue Router

懒加载这个功能超级简单，就用 VueRouter 搞定！首先，把要用的组件导进配置文件，齐活儿！

新版的VueRouter来，直接上代码：

  routes:[

    {

      path:’/example’,

组件，就是能吞掉`./Example.vue’的小魔法盒！

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./Home.vue')
    },
    {
      path: '/about',
      component: () => import('./About.vue')
    },
    {
      path: '/contact',
      component: () => import('./Contact.vue')
    }
  ]
});

    }

]

});

当用户访问对应路由时才会异步加载相应的组件。

记得在搞Vue时候要使用动态加载和懒加载技巧！善用v-if指令、动态组件、异步组件还有Vue Router这些妙招，可以让你的项目飞速运行，效果美爆啦。

			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/vue2/2024/03/12463.html，转载请注明出处~~~