动态组件和keep-alive组件缓存：

目录

动态组件：

介绍：

代码实现：

方式一：使用 v-if

方式二：元素的 is

keep-alive：

介绍：

keep-alive代码实现：   

结合router使用：

跟keep-alive有关的生命周期是哪些?

---

动态组件：

介绍：

        动态组件是指：在一个挂载点使用多个组件，并进行动态切换。可能对于新手来说，这句话有些难理解，什么是挂载点?可以简单的理解为页面的一个位置。

代码实现：

        最常见的就是：tab的切换功能。在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性，二是使用 v-if 。

方式一：使用 v-if

<template>
  <div class="hello">
    <h3>使用v-if实现</h3>
    <ul>
      <li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="change(index)">{
  {item}}</li>
    </ul>
    <div>
        <shuma v-if="index===0"></shuma>
        <shouji v-else-if="index===1"></shouji>
        <pc v-else></pc>
    </div>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      keppIndex:0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
  },
  methods: {
    change(index) {
      this.i