Vue高级特性「七」--动态组件\异步组件***_vue computed 动态引入异步组件-优快云博客

本文链接：https://blog.youkuaiyun.com/express_yourself/article/details/109322092

本文介绍Vue中动态组件和异步组件的基本概念及应用方法。动态组件允许根据条件渲染不同组件，而异步组件则能实现组件的懒加载，提高应用性能。文中通过实例展示了如何使用Vue实现页面切换及按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：
需要根据数据（新闻详情页），动态渲染的场景，即组件类型不确定。

动态组件基本使用

<component :is="nextTickName"></component>

import nextTick from './nextTick'
export default {
  components:{
    nextTick,
  },
  data() {
    return {
      nextTickName:"nextTick"
    };
  },
  
};

用动态组件实现切换

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

new Vue({
  el: '#example',
  data:{
    index:0,
    arr:[
      {template:`<div>我是页面A</div>`},
      {template:`<div>我是页面B</div>`},
      {template:`<div>我是页面C</div>`}
    ],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})

什么是异步组件？

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。

Vue实现按需加载

import() 函数
按需加载，异步加载大组件

注册方式：

components:{
  FromDemo:()=>import('../FromDemo')
}

组件调用方式：

<FromDemo v-if="show"/>
<button @click="show=true"></button>