Vue-组件缓存-keep-alive

1. 介绍

在Vue.js中，组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时，频繁的销毁和重建会带来一定的性能开销。为了解决这个问题，Vue提供了一个名为keep-alive的抽象组件。下面我们将深入探讨keep-alive的工作原理、使用场景和最佳实践。

keep-alive是什么

• keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
• keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

keep-alive的优点

• 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，
• 减少加载时间及性能消耗，提高用户体验性。

2. Keep-Alive的工作原理

Keep-Alive组件主要用于缓存不活跃的组件实例，而不是销毁它们。当组件被包含在Keep-Alive内部时，它的状态（如数据、计算属性、生命周期钩子等）会被保留，而不是在每次切换时重新创建。当组件再次被切换到前台时，它的状态可以快速恢复，从而提高应用的整体性能。

3. 使用场景

1. 频繁切换的页面组件：对于那些频繁切换的页面组件，如用户中心、设置等，使用Keep-Alive可以显著提高切换速度，减少不必要的渲染和计算。
2. 列表渲染优化：当渲染大量列表数据时，频繁的DOM操作会消耗大量性能。通过使用Keep-Alive，我们可以缓存不活跃的列表项组件，从而减少不必要的DOM操作。
3. 懒加载与预加载：结合Vue的异步组件和Keep-Alive，可以实现懒加载和预加载的效果，按需加载和缓存组件，进一步提高性能。

4. 使用方法

在Vue组件中，使用keep-alive标签包裹需要缓存的组件即可。例如：

<keep-alive>  
  <router-view></router-view>  
</keep-alive>

在这里，router-view用于渲染当前路由对应的组件视图。由于被包裹在keep-alive内，这些组件实例会被缓存起来，而不是每次切换时都重新创建。

5. keep-alive的三个属性

三个属性：

• include ： 组件名数组，只有匹配的组件会被缓存 – 比较常用
• exclude ： 组件名数组，任何匹配的组件都不会被缓存
• max ： 最多可以缓存多少组件实例

如下：

<keep-alive :include="[Layout,...]"> // 指定数组组件
  <router-view></router-view>
</keep-alive>

6. 特别说明

1. 组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
2. keep-alive的使用会触发两个生命周期函数 – 钩子
   • activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发
   • deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

如下：

activated () {
  console.log('actived 激活 → 进入页面');
},
deactivated() {
  console.log('deactived 失活 → 离开页面');
}

7. 注意事项

1. 内存消耗：虽然Keep-Alive能够提高性能，但过度使用或不正确使用可能会导致不必要的内存消耗。应确保只在必要的情况下使用它。
2. 数据一致性：由于组件状态会被保留，因此需要确保组件的数据在前后台切换时不会发生不一致的情况。在组件内部，需要合理处理数据的初始化和更新逻辑。
3. 事件监听器与子组件引用：在使用Keep-Alive时，需要特别注意事件监听器和子组件引用的处理。因为组件实例会被缓存，之前绑定的事件监听器和子组件引用可能会继续存在，造成潜在的问题。正确处理这些情况是确保稳定性和性能的关键。

代码007普通

打赏 收藏 海报 链接