Vue 进阶面试题, Vue 如何缓存当前组件?缓存后如何更新?

Step 1

Q:: 如何在 Vue 中缓存当前组件？

A:: 在 Vue 中，可以使用 <keep-alive> 组件来缓存某个组件的状态和 DOM 结构。<keep-alive> 组件是一个抽象组件，当其包裹动态组件时，会缓存不活动的组件实例，而不是在每次切换时重新创建组件实例。可以将需要缓存的组件用 <keep-alive> 包裹，来实现缓存功能。例如：

 
<template>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</template>
 

Step 2

Q:: Vue 组件缓存后，如何更新组件？

A:: 当组件被 <keep-alive> 缓存后，通常其生命周期的 activated 和 deactivated 钩子函数会被触发，而不是 mounted 和 destroyed 钩子。要更新组件，可以在 activated 钩子中加入逻辑，以便每次组件被激活时更新数据。例如：

 
export default {
  activated() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 逻辑以获取最新的数据
    }
  }
}
 

Step 3

Q:: 在 Vue 项目中，如何手动清除组件缓存？

A:: 可以使用 <keep-alive> 组件的 include 和 exclude 属性来动态地控制缓存的组件。例如，如果你想要在某个条件下清除某个组件的缓存，可以将该组件的名称从 include 属性中移除，或添加到 exclude 属性中。此外，也可以通过 $forceUpdate 强制更新整个组件树，但这会清除所有状态。