vue中keep-alive的学习小结

mac2025-08-06  10

小结

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】

最新回复(0)