面试题：如何在Vue Keep - Alive缓存组件中实现部分数据不被缓存

Question

在实际项目中，有时希望在使用Vue Keep - Alive缓存组件状态时，部分数据不被缓存。假设存在一个表单组件被Keep - Alive缓存，表单中的部分输入值需要实时更新而不依赖缓存，请描述实现该需求的思路和主要步骤。

Answer 1

1. 思路：
   • 使用keep - alive时，activated和deactivated钩子函数可用于处理组件激活和停用的逻辑。对于不想缓存的数据，可在deactivated钩子中存储当前值（例如存储到本地存储或全局状态管理工具中），在activated钩子中再从存储中获取最新值并更新到表单。同时，也可利用Vue的响应式原理，将不想缓存的数据定义为非data属性（如计算属性），每次获取时从最新数据源获取。
2. 主要步骤：
   • 定义数据存储方式：
     • 若使用本地存储，可使用localStorage对象。例如，在组件中定义存储函数：

methods: {
  saveFormData() {
    const { inputValue } = this;
    localStorage.setItem('formInputValue', inputValue);
  }
}

• 在deactivated钩子中存储数据：

deactivated() {
  this.saveFormData();
}

• 在activated钩子中恢复数据：

activated() {
  const inputValue = localStorage.getItem('formInputValue');
  if (inputValue) {
    this.inputValue = inputValue;
  }
}

• 若使用计算属性：
  • 例如表单的值依赖于一个全局状态管理工具（如Vuex）中的数据，可定义计算属性：

computed: {
  formInputValue() {
    return this.$store.state.globalFormValue;
  }
}

这样每次访问formInputValue时，都会从全局状态获取最新值，而不会依赖缓存。