keep-alive 的理解

keep-alive 的理解

1. Keep-alive 是什么

keep-alive 是 Vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 可以设置以下 props 属性：

• include：只有名称匹配的组件会被缓存。
• exclude：任何名称匹配的组件都不会被缓存。
• max：最多可以缓存多少组件实例。

基本用法：

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

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated 与 deactivated）。

2. 使用场景：如何在路由中设置是否缓存？

在路由中设置 keepAlive 属性判断是否需要缓存：

{
  path: 'list',
  name: 'itemList', // 列表页
  component(resolve) {
    require(['@/pages/item/list'], resolve)
  },
  meta: {
    keepAlive: true,
    title: '列表页'
  }
}

使用 <keep-alive>：

<div id="app" class="wrapper">
  <keep-alive>
    <!-- 需要缓存的视图组件 -->
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <!-- 不需要缓存的视图组件 -->
  <router-view v-if="!$route.meta.keepAlive" />
</div>

3. 缓存后如何获取数据

两种方法：

beforeRouteEnter

每次组件渲染的时候，都会执行 beforeRouteEnter：

beforeRouteEnter(to, from, next) {
  next(vm => {
    console.log(vm)
    // 每次进入路由执行
    vm.getData() // 获取数据
  })
}

activated

在 keep-alive 缓存的组件被激活的时候，都会执行 activated 钩子：

activated() {
  this.getData() // 获取数据
}

注意：服务器端渲染期间 activated 不被调用。

来源整理自：vue3js.cn 面试官系列