:is特性

组件之间进行动态切换，可以通过Vue 的 <component> 元素加一个特殊的 is attribute 来实现

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字
• 一个组件的选项对象

 <div>
    <!--
      按钮，用于切换组件
      注意,此时的A为字符串而非变量
    -->
    <button @click="showWhat = 'A'">showA</button>
    <button @click="showWhat = 'B'">showB</button>
      <!--
        动态切换显隐，组件
      -->
      <component :is="showWhat"></component>
  </div>

<script>
//引入组件A以及组件B
import A from "./a";
import B from "./b";

export default {
  components: {
    //声明组件A,B
    A,
    B
  },
  data() {
    return {
      //默认显示组件A，若字符串为B则显示组件B,name为component声明
      showWhat: "A"
    };
  }
};
</script>

我们可以用 :is 来优雅的切换TAB， 这里我们来说一说为什么不用 v-show 来切换呢， 先说说他们之间的区别吧， V-show 会第一时间加载两个组件， 两个组件的生命周期都会触发，会造成不必要的性能浪费，而且切换的时候永远不会再创造挂载一次 Vue()，也就是说，生命周期只会触发一次， 并不优雅， 既然说到了v-show，那么相信大家都想到了v-if，如果是v-if的话 确实不会造成同事加载两个组件，不过v-if切换的话 每次都会创造挂载一次，如果没有重新渲染的需要的话 ，会造成性能浪费， 那么 :is 如何缓存呢， :is 通过 keep-alive标签缓存。被该标签包裹的组件就会被缓存下来，每次点击都不会重新渲染(即创造~挂载)。相比较于 v-show 和 v-if 来说 使用 :is 动态组件更加优雅~

<div>
    <!--
      按钮，用于切换组件
      注意,此时的A为字符串而非变量
    -->
    <button @click="showWhat = 'A'">showA</button>
    <button @click="showWhat = 'B'">showB</button>



      <!--
        动态切换显隐，组件
      -->
      <keep-alive :include='A' :max="10">
        <component :is="showWhat"></component>
      </keep-alive>
      
  </div>

<script>
//引入组件A以及组件B
import A from "./a";
import B from "./b";

export default {
  components: {
    //声明组件A,B
    A,
    B
  },
  data() {
    return {
      //默认显示组件A，若字符串为B则显示组件B,name为component声明
      showWhat: "A"
    };
  }
};
</script>

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。