Vue高级特性「七」--动态组件\异步组件***

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

动态组件基本使用

<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>