面试问到vue中对 keep-alive的理解

菜鸟2024-05-01 09:30:01

1、keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染

2、一般结合路由和动态组件一起使用,用于缓存组件

3、对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated

4、提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;

例如:

<keep-alive include="a">
 <component>
  <!-- name 为 a 的组件将被缓存! -->
 </component>
</keep-alive>

<keep-alive exclude="a">
 <component>
  <!-- 除了 name 为 a 的组件都将被缓存! -->
 </component>
</keep-alive>