vue中的keep-alive缓存组件

keep-alive缓存组件

• 缓存组件

  <keep-alive>
  	<!--需要缓存的内容-->
  </keep-alive>
  

  作用：可以让组件保留状态，避免重新渲染，提升页面性能

• 应用场景

  在tab切换中，切换三个组件，不用keep-alive,每个组件在重新显示时，都会再执行created,并重复发起请求
  如果在外面包裹keep-alive, 则初次创建后会缓存组件，再次显示，不会再执行created,而是直接显示缓存的内容，不会再重复发起请求

• 使用keep-alive后，缓存组件会多两个生命周期钩子

  当缓存组件被激活时

  activated(){
      console.log('a-当缓存组件被激活时');
  },
  

  当缓存组件失活时

  deactivated(){
      console.log('a-当缓存组件失活时');
  }
  

• keep-alive有两个属性: include exclude

  <keep-alive include="a1">    //只有a1被缓存，a1是组件的name属性的值
  <keep-alive exclude="a1">    //只有a1没有被缓存