Vue中无永久数据绑定时如何设置表单输入框初始加载值

解决方案 #

你当前的核心诉求是仅用initForm做初始值赋值，不触发后续的双向同步，有两种可行的实现方式：

方式一：保留现有逻辑，补全渲染控制

你当前的写法已经满足「无永久双向绑定」的要求，只要补全两个校验点即可避免用户输入被回滚：

• 确认所有输入控件仅使用:单向绑定初始值，没有使用v-model绑定initForm的属性，且全链路没有修改initForm的操作：
  普通输入框用:value="initForm[prop].value"，单选/复选框用:checked="initForm[prop].value"即可，@input事件按你现有逻辑直接取事件对象的值提交、不修改initForm就不会触发反向更新。
• 用已有的dataAvailable状态控制表单渲染：
  给整个表单区域加v-if="dataAvailable"，保证表单是在onMounted给initForm赋值完成后才渲染，避免页面加载初期用户提前输入、后续initForm首次赋值触发视图更新覆盖用户输入的问题。

方式二：彻底禁用初始值的响应性

如果要从根源避免响应式更新带来的意外回滚，直接把initForm改为非响应式的普通对象即可：

1. 把声明代码从var initForm = ref({})改为const initForm = {}
2. onMounted赋值时修改为：

onMounted(() => {
  const cloned = cloneDeep(form.value)
  Object.assign(initForm, cloned)
  if (cloned && Object.keys(cloned).length && Object.getPrototypeOf(cloned) === Object.prototype) {
    console.log(initForm)
    dataAvailable.value = true
  }
})

非响应式的initForm无论怎么修改都不会触发视图更新，完全不会出现用户输入被初始值覆盖的情况。

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