Vue.js标签休眠后DOM与Model不同步问题求解

我有一个Vue.js表单，出现了数据与DOM不同步的问题，复现步骤如下：

• 在Chrome或Firefox（非Safari）的新标签页中打开演示页面；
• 选择任意选项；
• 关闭浏览器（需设置启动时“恢复上次浏览页面”），或在Chrome中通过chrome://discards执行“紧急丢弃标签”操作；
• 重新打开浏览器回到该页面，或从“丢弃标签页”切换回该页面；
• 此时Vue.js的data值为0，但DOM中的输入项已被选中，说明二者数据不同步。

注：使用前进/后退按钮时该问题不会出现

我尝试设置所有输入项的autocomplete=off可以“解决”此问题，但这会导致前进/后退按钮清空表单，而我的表单非常长，这会给用户带来极大不便。另外，实际生产代码是庞大且复杂的表单，难以通过手动修改Vue状态来实现页面加载时的同步。

请问该如何解决这个问题？有没有办法让Vue重新渲染表单以实现数据同步？

1. 监听pageshow事件同步DOM到Vue数据 #

浏览器在恢复标签页时会触发pageshow事件，利用这个事件遍历表单元素，将DOM当前值同步到Vue的data中，适合复杂表单无需逐个绑定：

export default {
  mounted() {
    window.addEventListener('pageshow', this.syncFormData);
  },
  beforeUnmount() {
    window.removeEventListener('pageshow', this.syncFormData);
  },
  methods: {
    syncFormData(event) {
      if (event.persisted) {
        const formElements = this.$el.querySelectorAll('input, select, textarea');
        formElements.forEach(el => {
          let value;
          if (el.type === 'checkbox' || el.type === 'radio') {
            value = el.checked;
          } else {
            value = el.value;
          }
          // 假设元素name属性与data键名一致，可根据实际调整
          const dataKey = el.name;
          if (this[dataKey] !== undefined) {
            this[dataKey] = value;
          }
        });
      }
    }
  }
}

若v-model绑定键名与元素name不一致，可给元素加data-model属性指定对应data键，比如<select data-model="selectedOption">，代码中用el.dataset.model获取键名。

2. 自定义指令批量绑定同步逻辑 #

针对复杂表单，可全局注册自定义指令，自动在标签页恢复时同步元素值到Vue数据：

// 全局注册指令
Vue.directive('sync-on-restore', {
  bind(el, binding) {
    const syncHandler = (event) => {
      if (event.persisted) {
        const dataKey = binding.arg || el.name;
        const vm = binding.instance;
        if (vm[dataKey] !== undefined) {
          vm[dataKey] = el.type === 'checkbox' ? el.checked : el.value;
        }
      }
    };
    window.addEventListener('pageshow', syncHandler);
    el._syncHandler = syncHandler;
  },
  unbind(el) {
    window.removeEventListener('pageshow', el._syncHandler);
  }
});

模板中使用：

<select v-sync-on-restore:selectedOption name="selectedOption" v-model="selectedOption">
  <!-- 选项内容 -->
</select>

关键原理说明 #

浏览器的bfcache（后退/前进缓存）或标签页恢复机制会直接还原DOM状态，但Vue响应式系统无法监听这类非用户交互导致的DOM变化。通过pageshow事件的persisted属性判断页面是否从缓存恢复，手动将DOM值同步到data，即可让二者保持一致。

内容的提问来源于stack exchange，提问作者Viktor Holmberg