【vue篇】Vue 中保持页面状态的终极方案：从卸载到缓存

在开发复杂单页应用（SPA）时，你是否遇到过这些痛点？

本文将系统性地讲解 Vue 中保持页面状态的 4 大策略，覆盖组件卸载与不卸载两种场景，助你打造丝滑的用户体验。

一、核心思路：状态持久化的两大路径

二、场景一：组件会被卸载（状态需跨路由保留）

当用户跳转到其他页面，当前组件被销毁，状态必须“外化”保存。

方案 1：LocalStorage / SessionStorage（持久化存储）

原理

• 利用浏览器本地存储；
• 在组件销毁前 (beforeDestroy) 保存状态；
• 在组件创建时 (created 或 mounted) 恢复状态。

实现代码

// List.vue
export default {
  data() {
    return {
      list: [],
      page: 1,
      searchQuery: '',
      scrollTop: 0
    };
  },

  created() {
    // 恢复状态
    const saved = localStorage.getItem('listState');
    if (saved) {
      const state = JSON.parse(saved);
      // 只在“返回”时恢复（通过 flag 控制）
      if (state.fromDetail) {
        Object.assign(this.$data, state.data);
      }
    }
  },

  beforeDestroy() {
    // 保存状态
    const state = {
      fromDetail: true, // 标记来源
      data: {
        list: this.list,
        page: this.page,
        searchQuery: this.searchQuery,
        scrollTop: this.scrollTop
      },
      timestamp: Date.now()
    };
    localStorage.setItem('listState', JSON.stringify(state));
  },

  methods: {
    saveScroll() {
      this.scrollTop = this.$el.scrollTop;
    }
  }
}

优化：防重复恢复

// 在路由守卫中清除标记
router.beforeEach((to, from, next) => {
  if (to.name !== 'List' && from.name === 'List') {
    const saved = localStorage.getItem('listState');
    if (saved) {
      const state = JSON.parse(saved);
      state.fromDetail = false; // 下次进入不恢复
      localStorage.setItem('listState', JSON.stringify(state));
    }
  }
  next();
});

优点

• 兼容性好，无需额外依赖；
• 页面刷新后状态依然存在。

缺点

• JSON.stringify() 无法处理 Date, RegExp, Function, Symbol 等类型；
• 需手动管理恢复逻辑；
• 存储大小有限（~5MB）。

方案 2：路由传参（Memory-based 临时传递）

原理

• 利用 vue-router 的 route.state（类似 React Router）；
• 将状态作为路由参数传递；
• 目标页面通过 $route.state 读取。

Vue 中的实现（需 router 支持）

// 使用 vue-router 4+ (Vue 3) 或自定义方案
// 跳转时携带状态
this.$router.push({
  name: 'List',
  state: {
    list: this.list,
    page: this.page,
    searchQuery: this.searchQuery
  }
});

// 在目标组件中读取
created() {
  const { state } = this.$route;
  if (state) {
    Object.assign(this.$data, state);
  }
}

// 模拟 state 传递
this.$router.push({
  name: 'List',
  query: {
    restore: 'true',
    page: this.page,
    q: this.searchQuery
  }
});

// 接收
created() {
  const { restore, page, q } = this.$route.query;
  if (restore) {
    this.page = Number(page);
    this.searchQuery = q;
    // 触发数据加载
  }
}

优点

• 可传递复杂对象（无 JSON 序列化问题）；
• 不污染本地存储。

缺点

• 页面刷新后状态丢失；
• URL 变长，不够优雅；
• 多入口需重复逻辑。

三、场景二：组件不会被卸载（状态保留在内存）

当组件只是“隐藏”而非销毁，可直接保留其状态。

方案 1：父组件统一管理（Single Render）

结构设计

<!-- Parent.vue -->
<template>
  <div class="container">
    <!-- 所有子页面作为全屏组件渲染 -->
    <ListComponent v-if="currentView === 'list'" />
    <DetailComponent v-if="currentView === 'detail'" />
    <EditComponent v-if="currentView === 'edit'" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: 'list'
    };
  },
  provide() {
    return {
      switchTo: (view) => {
        this.currentView = view;
      }
    };
  }
};
</script>

优点

• 状态天然保留，无需额外处理；
• 切换极快，无重渲染开销。

缺点

• 所有组件常驻内存，占用高；
• 父组件逻辑臃肿；
• 无法通过 URL 直接定位页面（不利于分享和 SEO）。

方案 2：keep-alive（Vue 官方缓存方案）

核心原理

• keep-alive 是 Vue 内置组件，用于缓存动态组件或路由视图；
• 被包裹的组件在切换时不会被销毁，而是被缓存；
• 生命周期钩子变为：
  • activated：组件激活时调用；
  • deactivated：组件失活时调用。

实战配置

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 缓存需要 keepAlive 的路由 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不需要缓存的路由 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

// router.js
const routes = [
  {
    path: '/list',
    name: 'List',
    component: () => import('@/views/List.vue'),
    meta: {
      keepAlive: true // 标记需要缓存
    }
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('@/views/Detail.vue')
    // 默认不缓存
  }
];

// List.vue
export default {
  data() {
    return {
      list: [],
      page: 1,
      searchQuery: ''
    };
  },
  activated() {
    console.log('List 组件被激活');
    // 可在此处执行刷新逻辑（如果需要）
  },
  deactivated() {
    console.log('List 组件被缓存');
    // 组件状态自动保留
  }
}

优点

• Vue 官方支持，稳定可靠；
• 自动管理组件实例，状态无缝保留；
• 支持条件缓存（通过 include / exclude）；

<keep-alive include="List,Search">
  <router-view />
</keep-alive>

缺点

• 缓存组件常驻内存，可能影响性能；
• 需要合理设置 max 属性控制缓存数量；

<keep-alive :max="5">
  <router-view />
</keep-alive>

• activated 中需注意避免重复请求。

四、高级技巧：结合 Vuex/Pinia 进行状态管理

对于复杂状态，建议使用状态管理库：

// store/modules/list.js
const state = {
  listStates: {} // key: route fullPath, value: state
};

const mutations = {
  SAVE_LIST_STATE(state, { key, data }) {
    state.listStates[key] = data;
  },
  CLEAR_LIST_STATE(state, key) {
    delete state.listStates[key];
  }
};

// 组件中
computed: {
  ...mapState(['listStates']),
  currentStateKey() {
    return this.$route.fullPath;
  }
},
created() {
  const saved = this.listStates[this.currentStateKey];
  if (saved) Object.assign(this.$data, saved);
},
beforeDestroy() {
  this.$store.commit('SAVE_LIST_STATE', {
    key: this.currentStateKey,
    data: pick(this.$data, ['list', 'page', 'searchQuery'])
  });
}

结语

最佳实践建议：

1. 优先使用 keep-alive 缓存常用页面；
2. 对于需跨会话保留的状态，使用 LocalStorage；
3. 复杂状态交由 Pinia/Vuex 管理。