面试题：Vue Keep - Alive在嵌套组件结构下复杂生命周期问题处理

思路：
- 当父组件更新时，Keep - Alive缓存的子组件默认不会重新渲染，其生命周期钩子函数不会自动执行。要确保activated、deactivated等钩子函数正确执行，需触发Keep - Alive组件的缓存更新机制。
可能用到的方法：
- 通过key值变化：
  - 给Keep - Alive包裹的子组件添加一个动态的key属性。当父组件更新时，改变这个key值，这样会使Keep - Alive认为子组件是一个新的组件，从而重新缓存并触发其生命周期钩子函数。例如：

<template>
  <div>
    <keep - alive>
      <child - component :key="childKey"></child - component>
    </keep - alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childKey: 0
    };
  },
  methods: {
    updateChild() {
      this.childKey++;
    }
  }
};
</script>

使用provide和inject：
- 在父组件中通过provide提供一个状态或方法。
- 在被Keep - Alive缓存的子组件中通过inject注入。当父组件更新时，改变provide的值或调用provide的方法，子组件可响应这个变化并手动触发自身的一些逻辑，模拟生命周期钩子函数的执行。例如：

<!-- 父组件 -->
<template>
  <div>
    <keep - alive>
      <child - component></child - component>
    </keep - alive>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      sharedData: 0
    };
  },
  provide() {
    return {
      updateSharedData: this.updateData
    };
  },
  methods: {
    updateData() {
      this.sharedData++;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  inject: ['updateSharedData'],
  created() {
    this.$on('hook:activated', () => {
      // 这里可通过inject的方法触发相关逻辑
      this.updateSharedData();
    });
  }
};
</script>

通过事件总线：
- 在父组件更新时，通过事件总线（如Vue的EventBus）发送一个事件。
- 被Keep - Alive缓存的子组件监听这个事件，在事件回调中执行相关逻辑，模拟生命周期钩子函数执行。例如：

<!-- 父组件 -->
<template>
  <div>
    <keep - alive>
      <child - component></child - component>
    </keep - alive>
    <button @click="sendEvent">发送事件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
const eventBus = new Vue();
export default {
  components: {
    ChildComponent
  },
  methods: {
    sendEvent() {
      eventBus.$emit('parent - updated');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
const eventBus = new Vue();
export default {
  created() {
    eventBus.$on('parent - updated', () => {
      // 执行相关逻辑
    });
  }
};
</script>

星途面试题库

面试题：Vue Keep - Alive在嵌套组件结构下复杂生命周期问题处理

知识考点

面试题答案