面试题：Vue中keep - alive缓存组件生命周期钩子的复杂场景应用

借助Vue生命周期钩子和keep - alive特性实现思路
- activated钩子：当组件被keep - alive缓存后重新进入页面时，会触发activated钩子。可以在这个钩子中监听数据变化并进行相应处理。
- 数据传递：可以通过Vuex来管理共享数据，或者使用事件总线（Event Bus）来实现组件间通信。这里以事件总线为例。
关键代码示例
- 创建事件总线：

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

数据更新组件：

<template>
  <div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';
export default {
  data() {
    return {
      sharedData: '初始数据'
    };
  },
  methods: {
    updateData() {
      this.sharedData = '更新后的数据';
      eventBus.$emit('data - updated', this.sharedData);
    }
  }
};
</script>

依赖数据组件（被缓存组件）：

<template>
  <div>
    <p>接收到的数据: {{ receivedData }}</p>
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';
export default {
  data() {
    return {
      receivedData: ''
    };
  },
  activated() {
    eventBus.$on('data - updated', (data) => {
      this.receivedData = data;
      // 在此处进行相应处理，比如重新渲染相关DOM等
    });
  },
  deactivated() {
    eventBus.$off('data - updated');
  }
};
</script>

在Vue应用中使用缓存组件：

<template>
  <div id="app">
    <keep - alive>
      <DataUpdatingComponent></DataUpdatingComponent>
    </keep - alive>
    <keep - alive>
      <DataDependentComponent></DataDependentComponent>
    </keep - alive>
  </div>
</template>

<script>
import DataUpdatingComponent from './components/DataUpdatingComponent.vue';
import DataDependentComponent from './components/DataDependentComponent.vue';
export default {
  components: {
    DataUpdatingComponent,
    DataDependentComponent
  }
};
</script>

上述代码中，DataUpdatingComponent组件更新数据后通过事件总线eventBus触发data - updated事件，DataDependentComponent在activated钩子中监听该事件并更新数据，实现了缓存组件间的数据传递与依赖处理。deactivated钩子中解除事件监听是为了避免内存泄漏。如果使用Vuex，数据更新时提交mutation，依赖数据的组件在activated钩子中通过计算属性获取最新数据并处理。

星途面试题库

面试题：Vue中keep - alive缓存组件生命周期钩子的复杂场景应用

知识考点

面试题答案