『学录』vue中keep-alive的学习小结

小结

keep-alive属性

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

用法如下：

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

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

<!--或者在app.vue中使用-->
<keep-alive include="a">
   <router-view/>
</keep-alive>

其中 a,b 代表的是组件的 name ，所以在使用该方法时，需要在组件的vue实例中配置 name 。

如下所示：

 export default {
        name:'a',
        data(){
            return{
                count:0
            }
        }
    }

参考：
keep-alive【vue.js】