文章目录

1. 一、keep-alive 基本使用
   1. 1. 基本示例
   2. 2. include 和 exclude 属性
2. 二、keep-alive 与 Vue 路由结合使用
   1. 1. 使用 keep-alive 缓存路由组件
   2. 2. meta 配置控制是否缓存
3. 三、keep-alive 的生命周期钩子
   1. 示例：
4. 四、总结

在 Vue 中，keep-alive 是一个内置的组件，用于缓存组件的状态，使得组件在切换时不重新渲染。它对于需要在不同视图之间切换但希望保留组件状态的场景非常有用，比如在多个页面之间切换时保持页面滚动位置、表单输入值等。

一、keep-alive 基本使用

keep-alive 主要用于包裹动态组件，通过其 include 和 exclude 属性来控制哪些组件需要缓存。

1. 基本示例

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA: { template: '<div>Component A</div>' },
    ComponentB: { template: '<div>Component B</div>' }
  }
}
</script>

在这个例子中，<keep-alive> 包裹了动态组件 component，每次切换组件时，之前的组件会被缓存，不会被销毁。

2. include 和 exclude 属性

• include：只有匹配的组件会被缓存。
• exclude：匹配的组件将不会被缓存。

<template>
  <div>
    <keep-alive :include="['ComponentA']">
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA: { template: '<div>Component A</div>' },
    ComponentB: { template: '<div>Component B</div>' }
  }
}
</script>

在这个例子中，只有 ComponentA 会被缓存，ComponentB 切换时会重新渲染。

---

二、keep-alive 与 Vue 路由结合使用

keep-alive 与 vue-router 配合使用时，可以控制页面间切换时的缓存行为，特别是在路由切换时，有时希望某些页面的状态能被保留。

1. 使用 keep-alive 缓存路由组件

<template>
  <div>
    <keep-alive :include="['Home']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

在这个示例中，Home 路由对应的组件会被缓存，其他路由的组件则不会被缓存。

2. meta 配置控制是否缓存

有时我们希望根据路由的某些信息来动态决定是否缓存，可以通过路由的 meta 字段来实现。

// router.js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { keepAlive: true }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { keepAlive: false }
  }
];

// main.js
const router = new VueRouter({
  routes
});

const app = new Vue({
  router,
  computed: {
    include() {
      const matched = this.$route.matched;
      const keepAlive = matched.some(route => route.meta.keepAlive);
      return keepAlive ? ['Home'] : [];
    }
  },
  render: h => h(App)
}).$mount('#app');

通过这种方式，可以控制 Home 页面是否缓存，而 About 页面则不会缓存。

---

三、keep-alive 的生命周期钩子

keep-alive 缓存的组件有两个额外的生命周期钩子：

• **activated**：当组件被激活时触发（即从缓存中激活）。
• **deactivated**：当组件被停用时触发（即进入缓存）。

这两个钩子可以帮助你在组件被缓存或恢复时执行相应的操作。

示例：

export default {
  activated() {
    console.log('组件已激活');
  },
  deactivated() {
    console.log('组件已停用');
  }
}

在组件从缓存中恢复时，activated 会被触发，而当组件被缓存时，deactivated 会被触发。

---

四、总结

• keep-alive 是 Vue 提供的一个内置组件，用于缓存组件状态。
• 它通常用于动态组件和路由视图，以避免组件的重新渲染，提升性能。
• include 和 exclude 可以用来精细控制哪些组件被缓存。
• 与 Vue Router 配合使用时，可以通过 meta 字段来控制哪些路由对应的组件应该被缓存。
• activated 和 deactivated 生命周期钩子允许你在组件激活或停用时执行额外的操作。

keep-alive 是 Vue 中优化性能、提升用户体验的有力工具，特别是在需要频繁切换页面和组件的场景下。