表单数据一直无法重置

本节目标：理解“表单数据一直无法重置”的核心思路，并能把它用于实际开发或面试表达。问题是这样造成的，我在一个模块中定义了一些初始值： //区县 export const countryConstructionReportList = { [sysUser.adCode]: { label: '', value: { isActive: 1, createDateTime: '', zhzCount: '', wtCount: '', wtyjjCount: '', jbhCount: '', jbwyCount: '', yjjwtCount: '', lxdcCount: '', zxdcCount: '', zhzhyCount: '', hzhyCount: '', bmldhyCount: '', mjheCount: '', kzhdCount: '', provinceGsp: '', cityGsp: '', countyGsp: '', countryGsp: '', villageGsp: '', gzryCount: '', gzrybzCount: '', riverCapital: '', yingCityYhycCount: '', yiCityYhycCount: '', yingCountYyhycCount: '', yiCountYyhycCount: '', ybhhCount: '', kzxchdCount: '', kzxchdYrsCount: '', xchdZt: '', }, }, };，这些值被导入到我的组件中import { constructionReportList, countryConstructionReportList, ReportReviewService, transformArrayToObject, validateConstructionReport, transformObjectToArray, transformArrayToObjectWithLabel, } from './addTableFileConfig'; 然后赋值给了data中的 monthlyReportParam: { formPerson: '', formUnit: '', reviewer: '', }, this.editPigStatusForm.constrInfoList = newCountryConstructionReportList;，并在模板渲染中进行了双向绑定 <el-form :model="editPigStatusForm" > <el-form-item class="form-item"> <el-input type="number" v-model="entry.value.wtyjjCount" ></el-input> </el-form-item> </el-form>，然后当我在表单中填入一些值，这些值是不是更新了我的源初始数据，在接下下来，当我 this.$router.go(-1);后，这个在其它模块中的源初始数据由于变成了响应式数据，它的值不在是之前的值，并且也没有被重置，当我再进入到页面时，我在created时，又用这个改变的值进行了赋值，this.editPigStatusForm.constrInfoList = newCountryConstructionReportList;，所以表单的值又被设置成当初始离开页面时的值，是不是这样，你觉得我分析的有没有道理，那这个问题现在有什么好的最佳解决方案

你的分析是正确的！由于 Vue 的响应式系统，你从外部模块导入的 countryConstructionReportList 被引用后，当你在表单中修改其值时，这些修改会直接影响到导入的初始数据。之后，当你再次进入页面并在 created 钩子中将这个已经被修改的数据重新赋值给表单时，表单会显示上次修改后的数据，而不是初始的默认值。

解决方案为了避免这个问题，你需要确保每次进入页面时，表单的数据都是从一个未被修改的初始状态开始。可以通过以下几种方法来解决这个问题：

使用 lodash 的 cloneDeep 进行深拷贝在将初始数据赋值给表单数据时，使用 lodash 的 cloneDeep 方法创建一个深拷贝，确保每次都得到一个新的对象实例，而不是对原始数据的引用。 import cloneDeep from 'lodash/cloneDeep'; created() { this.editPigStatusForm.constrInfoList = cloneDeep(countryConstructionReportList); }, 这种方式可以确保 countryConstructionReportList 的初始值不会因为表单数据的修改而被改变，每次进入页面时，都会重新创建一个干净的、未被修改的初始数据对象。
在外部模块中使用工厂函数返回初始数据另一种方法是将 countryConstructionReportList 包装在一个工厂函数中，每次调用这个函数时返回一个全新的初始数据对象： export function createCountryConstructionReportList() { return { [sysUser.adCode]: { label: '', value: { isActive: 1, createDateTime: '', zhzCount: '', wtCount: '', wtyjjCount: '', jbhCount: '', jbwyCount: '', yjjwtCount: '', lxdcCount: '', zxdcCount: '', zhzhyCount: '', hzhyCount: '', bmldhyCount: '', mjheCount: '', kzhdCount: '', provinceGsp: '', cityGsp: '', countyGsp: '', countryGsp: '', villageGsp: '', gzryCount: '', gzrybzCount: '', riverCapital: '', yingCityYhycCount: '', yiCityYhycCount: '', yingCountYyhycCount: '', yiCountYyhycCount: '', ybhhCount: '', kzxchdCount: '', kzxchdYrsCount: '', xchdZt: '', }, }, }; } 然后在组件中调用这个函数来获取初始数据： import { createCountryConstructionReportList } from './addTableFileConfig'; created() { this.resetData(); // 清空之前的数据 this.editPigStatusForm.constrInfoList = createCountryConstructionReportList(); // 其他逻辑 }, 这种方式可以确保每次调用 createCountryConstructionReportList 时，都会生成一个全新的初始数据对象，不会因为表单数据的修改而污染全局的初始数据。

这种方法确保在用户离开页面之前，数据已被重置，下次进入时可以正常加载默认数据。推荐使用 lodash 的 cloneDeep 或者工厂函数来创建每次进入页面时的初始数据对象。这将避免数据被意外修改的问题，并确保你的表单在每次加载时都是从未修改的初始状态开始。

表单数据一直无法重置 ​

表单数据一直无法重置