面试题：Vue组件缓存策略下，如何处理动态组件的状态管理？

思路
- 状态管理：为每个子组件单独管理状态，避免相互干扰。可以使用Vuex或组件内部的data来管理。如果状态只与组件自身相关，优先使用组件内部的data；若状态需要在多个组件间共享，使用Vuex。
- 缓存控制：利用<keep - alive>的特性来缓存组件。<keep - alive>会缓存组件实例，再次进入时不会重新创建组件，从而复用状态。但要注意在合适的时机更新缓存组件的状态。
- 生命周期钩子：利用组件的生命周期钩子函数，如activated和deactivated。activated在组件被激活（从缓存中取出并插入DOM）时调用，可以在此处更新组件状态；deactivated在组件被停用（缓存起来）时调用，可以在此处做一些清理工作，防止内存泄漏。
可能用到的技术点
- Vuex：
  - 安装并配置Vuex，在store中定义模块，每个模块管理一个子组件的状态。例如：

const store = new Vuex.Store({
  modules: {
    componentA: {
      state: {
        formInput: ''
      },
      mutations: {
        updateFormInput(state, value) {
          state.formInput = value;
        }
      }
    },
    componentB: {
      state: {
        listExpanded: false
      },
      mutations: {
        toggleListExpanded(state) {
          state.listExpanded =!state.listExpanded;
        }
      }
    }
  }
});

 - 在子组件中通过`mapState`和`mapMutations`辅助函数来获取和更新状态。例如在组件A中：

<template>
  <div>
    <input v - model="formInput" @input="updateFormInput">
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
  ...mapState('componentA', ['formInput'])
  },
  methods: {
  ...mapMutations('componentA', ['updateFormInput'])
  }
};
</script>

组件内部data：如果状态只在组件内部使用，在组件的data函数中定义状态。例如组件A：

<template>
  <div>
    <input v - model="formInput">
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInput: ''
    };
  }
};
</script>

生命周期钩子：
- 在子组件中使用activated钩子函数更新状态。例如组件B：

<template>
  <div>
    <button @click="toggleListExpanded">{{ listExpanded? 'Collapse' : 'Expand' }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listExpanded: false
    };
  },
  activated() {
    // 这里可以进行一些数据的重新加载或状态更新操作
  },
  methods: {
    toggleListExpanded() {
      this.listExpanded =!this.listExpanded;
    }
  }
};
</script>

 - 在`deactivated`钩子函数中做清理工作，例如取消定时器、解绑事件等，防止内存泄漏。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.timer = setInterval(() => {
      // 一些操作
    }, 1000);
  },
  deactivated() {
    clearInterval(this.timer);
  }
};
</script>

星途面试题库

面试题：Vue组件缓存策略下，如何处理动态组件的状态管理？

知识考点

面试题答案