Vue预填充输入内容持久化：页面重载后数据保留问题

我完全懂你遇到的这个痛点——浏览器自动回填的表单数据，居然会被Vue的空模型给冲掉，确实挺烦人的。你想在beforeMount从DOM捞数据的思路是可行的，但还有几个更优雅、更可靠的方案可以试试：

1. 优先用localStorage/sessionStorage自动持久化输入 #

这其实是最稳妥的方案，比依赖浏览器自动回填靠谱多了（毕竟有些浏览器隐私模式会禁用自动回填）。你可以给每个输入框绑定@input事件，实时把值存到本地存储，然后在组件初始化的时候从本地存储里读出来初始化模型：

<template>
  <input v-model="username" @input="saveToStorage('username', username)" />
  <input v-model="email" @input="saveToStorage('email', email)" />
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: ''
    }
  },
  created() {
    // 初始化时从localStorage读取
    this.username = localStorage.getItem('form_username') || ''
    this.email = localStorage.getItem('form_email') || ''
  },
  methods: {
    saveToStorage(key, value) {
      localStorage.setItem(`form_${key}`, value)
    }
  },
  // 可选：组件销毁时清理存储（如果不需要长期保存）
  beforeDestroy() {
    localStorage.removeItem('form_username')
    localStorage.removeItem('form_email')
  }
}
</script>

如果表单字段很多，还可以封装成一个全局的mixins，避免重复写相同逻辑。

2. 调整模型初始化时机，避开Vue的DOM同步 #

你提到beforeMount阶段DOM里已经有浏览器回填的数据了，那可以直接在这个钩子里面把DOM的值赋值给模型，这样Vue后续mounted时就不会用空值覆盖了：

<script>
export default {
  data() {
    return {
      username: '',
      email: ''
    }
  },
  beforeMount() {
    // 直接从DOM元素获取回填值
    this.username = document.getElementById('username-input')?.value || ''
    this.email = document.getElementById('email-input')?.value || ''
  }
}
</script>

不过这个方法依赖DOM元素的id，如果你用的是Vue的ref，要注意beforeMount阶段$refs还没初始化，所以得用原生DOM查询。另外要确保输入框都设置了name属性——浏览器的自动回填逻辑通常只针对带name的表单元素。

3. 自定义指令实现自动恢复 #

可以写一个全局自定义指令，自动处理输入框的回填恢复，这样不用每个组件都写重复逻辑：

// main.js
Vue.directive('restore-input', {
  bind(el, binding) {
    // 组件挂载时，从DOM获取回填值赋值给v-model绑定的属性
    const value = el.value
    if (value) {
      const vm = binding.context
      vm[binding.expression] = value
    }
  }
})

然后在模板里直接用：

<input v-model="username" v-restore-input />
<input v-model="email" v-restore-input />

这个指令会在元素绑定阶段（对应beforeMount前后）读取DOM的回填值，直接赋值给对应的模型属性，这样Vue后续渲染时就会用这个值，不会覆盖浏览器的回填内容。

内容的提问来源于stack exchange，提问作者Michał Sadowski