面试题：Vue中Keep - Alive如何避免组件重复渲染造成的资源浪费

Question

在Vue项目中使用Keep - Alive时，为了避免组件重复渲染而产生资源浪费，我们可以采取哪些措施？请至少列举两种，并简要说明其原理。

Answer 1

1. 使用 include 和 exclude 属性：
   • 原理：include 定义只有名称匹配的组件会被缓存，exclude 定义名称匹配的组件不会被缓存。这样可以精准控制哪些组件需要被 Keep - Alive 缓存，避免不必要的组件被缓存而占用资源。例如：

   <keep - alive include="ComponentA,ComponentB">
     <router - view></router - view>
   </keep - alive>
   

   上述代码中只有 ComponentA 和 ComponentB 组件会被缓存。
2. 在组件内使用 activated 和 deactivated 钩子函数：
   • 原理：当组件被 Keep - Alive 缓存后，再次进入时会触发 activated 钩子函数，离开时触发 deactivated 钩子函数。在 activated 钩子函数中可以执行一些数据初始化操作，而不是在 created 或 mounted 中执行，这样避免了重复渲染时重复执行初始化逻辑，从而节省资源。例如：

   export default {
     activated() {
       // 在这里进行数据的重新获取或初始化等操作
       this.fetchData();
     },
     deactivated() {
       // 可以在这里进行一些清理操作，比如取消定时器等
     }
   }
   

3. 利用 max 属性：
   • 原理：max 属性用于指定可以缓存的最大组件实例数。当缓存的组件数量达到 max 时，Keep - Alive 会按照 LRU（最近最少使用）算法淘汰最久未使用的组件实例，释放资源，避免缓存过多组件导致内存占用过高。例如：

   <keep - alive :max="5">
     <router - view></router - view>
   </keep - alive>
   

   上述代码表示最多缓存 5 个组件实例。