keep-alive #

• 我们先对之前的案例中 About 组件进行改造：
  • 在其中增加了一个按钮，点击可以递增的功能；
• 比如我们将 counter 点到 10，那么在切换到 home 再切换回来 about 时，状态是否可以保持呢？
  • 答案是否定的；
  • 这是因为默认情况下，我们在切换组件后，about 组件会被销毁掉，再次回来时会重新创建组件；
• 但是，在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件:keep-alive。

<keep-alive include="home, about">
    <component name="why"
               :age="18"
               @pageclick="pageclick"
               :is="currentTab"/>
</keep-alive>

属性 #

• keep-alive 有一些属性：
  • include - string | RegExp | Array。只有名称匹配的组件会被缓存；
  • exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
  • max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；
• include 和 exclude prop 允许组件有条件地缓存：
  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；
  • 匹配首先检查组件自身的 name 选项；

<!-- 逗号分隔字符串 -->
<keep-alive include="a, b">
<component :is="view"></component>
</keep-alive>

<!-- regex（使用`v-bind`) -->
<keep-alive :include=" /alb/">
    <component :is="view"></component>
</keep-alive>

<!-- Array（使用`v-bind`）-->
<keep-alive :include="['a','b']">
    <component :is="view"></component>
</keep-alive>

缓存组件的生命周期 #

• 对于缓存的组件来说，再次进入时，我们是不会执行 created 或者 mounted 等生命周期函数的：
  • 但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
  • 这个时候我们可以使用 activated 和 deactivated 这两个生命周期钩子函数来监听；

activated(){
    console.log("about activated")
},
deactivated(){
    console.log("about deactivated")
}