面试题：Vue Keep - Alive与动态组件结合的优化实践

实现思路

确定缓存组件：明确哪些动态组件需要缓存，通常是那些切换频率高且重新渲染成本较大的组件。
合理使用include和exclude：通过include指定需要缓存的组件名称，通过exclude指定不需要缓存的组件名称，以此精准控制缓存范围。
结合路由守卫：在路由切换时，利用路由守卫判断是否需要激活或停用Keep - Alive，确保只有在合适的路由切换场景下进行缓存操作。
组件销毁钩子：在被缓存的组件内部，确保在deactivated钩子函数中清理所有可能导致内存泄漏的操作，如定时器、事件监听器等。

关键代码片段

模板中使用Keep - Alive

<template>
  <div id="app">
    <keep - alive :include="cachedComponents">
      <component :is="currentComponent"></component>
    </keep - alive>
  </div>
</template>

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      cachedComponents: ['ComponentA', 'ComponentB'] // 需要缓存的组件名称数组
    };
  }
};

结合路由守卫

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import ComponentA from '@/components/ComponentA';
import ComponentB from '@/components/ComponentB';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/a',
      name: 'ComponentA',
      component: ComponentA
    },
    {
      path: '/b',
      name: 'ComponentB',
      component: ComponentB
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 根据路由判断是否需要缓存
  if (to.name === 'ComponentA' || to.name === 'ComponentB') {
    // 开启缓存
    next();
  } else {
    // 关闭缓存，例如清除缓存组件
    next();
  }
});

export default router;

组件内清理操作

export default {
  name: 'ComponentA',
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      // 模拟操作
    }, 1000);
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};

星途面试题库

面试题：Vue Keep - Alive与动态组件结合的优化实践

知识考点

面试题答案

实现思路

关键代码片段