浏览器返回页面时Vue响应式失效问题求助

问题重现 #

• 使用binary_state布尔变量控制controlled_element的类，根据值切换class_true与class_false
• 点击controlling_element按钮切换binary_state并同步至服务器，页面刷新时从服务器拉取最新值更新元素类
• 异常流程：
  1. 刷新页面，获取binary_state=true，controlled_element应用class_true
  2. 点击按钮切换为binary_state=false，元素类变为class_false
  3. 跳转页面后通过浏览器返回
  4. Vue开发者工具显示binary_state仍为false，但controlled_element的类变回服务器初始值class_true，响应式同步失效
• 环境：Chrome 108.0.5359.125、Edge 108.0.1462.76出现问题，Firefox 108.0.1无此问题
• 补充：未使用表单、vue-router，变量值本身正确，排除vuex/localStorage方案需求

问题原因 #

该问题由Chrome/Edge的**后退缓存（Back-Forward Cache，BF Cache）**导致：当用户通过后退/前进返回页面时，浏览器会直接恢复之前保存的DOM快照，而非重新执行页面脚本。此时Vue响应式数据虽保留，但DOM未与最新数据同步。

解决方案 #

方案1：监听pageshow事件手动同步DOM #

在组件mounted钩子中添加事件监听，当页面从BF Cache恢复时，手动将元素类与当前binary_state同步：

<script>
export default {
  data() {
    return {
      binary_state: false
    }
  },
  mounted() {
    this.fetchStateFromServer();
    // 监听页面从BF Cache恢复的事件
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        const element = document.getElementById('controlled_element');
        if (element) {
          element.classList.toggle('class_true', this.binary_state);
          element.classList.toggle('class_false', !this.binary_state);
        }
      }
    });
  },
  methods: {
    fetchStateFromServer() {
      // 替换为实际的服务器请求逻辑
      setTimeout(() => {
        this.binary_state = true;
      }, 100);
    },
    toggleState() {
      this.binary_state = !this.binary_state;
      // 替换为同步到服务器的请求逻辑
    }
  }
}
</script>

<template>
  <div>
    <button id="controlling_element" @click="toggleState">切换状态</button>
    <div 
      id="controlled_element"
      :class="{ class_true: binary_state, class_false: !binary_state }"
    >
      受控元素
    </div>
  </div>
</template>

方案2：调用$forceUpdate()触发重新渲染 #

若组件结构简单，可直接在pageshow事件中调用$forceUpdate()，强制Vue重新渲染组件以同步DOM与数据：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    this.$forceUpdate();
  }
});

注意：该方法会强制组件全量渲染，复杂组件使用可能影响性能。

方案3：禁用BF Cache（不推荐） #

通过添加空的unload事件监听禁用BF Cache，但会降低页面加载性能，仅作为最后选项：

window.addEventListener('unload', () => {});

内容的提问来源于stack exchange，提问作者H D