vue的keep-alive

keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；

keep-alive包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们；

例如：

有这样一个页面

food.vue中

<template>
    <div>
      <h1>button1页面：</h1>
      food页面,参数：{{$route.params.id}}
    </div>
</template>

<script>
    export default {
        name: "food",
      created(){
          console.log("food组件被创建")
      },
      mounted() {
          console.log("food组件被加载了")
      },
      destroyed() {
          console.log("food组件被销毁了")
      }
    }
</script>

rating.vue中

<template>
    <div>
      <h1>button2页面：</h1>
      rating页面,参数：{{$route.params.id}}
    </div>
</template>

<script>
    export default {
        name: "rating",
      created(){
        console.log("rating组件被创建")
      },
      mounted() {
        console.log("rating组件被加载了")
      },
      destroyed() {
        console.log("rating组件被销毁了")
      }
    }
</script>

当点击button1时，显示页面1，点击button2时，显示页面2；但是在切换的过程是：

 

food组件被创建——>food组件被加载——>（点击button2）——>rating组件被创建——>food组件被销毁——>rating组件被加载了；

切换不同组件时，会不断销毁，加载；

当用keep-alive包裹后：

<keep-alive>
       <router-view></router-view>
</keep-alive>

 

 组件被缓存，不会因为加载一个而销毁另一个，无论切换多少次都是图片中的两次创建，两次加载。