记一次 vue 中将 data 中的 json 对象传参到自定义函数中进行修改后发生抛出渲染异常的问题

本文链接：https://blog.youkuaiyun.com/weixin_44219762/article/details/118035625

问题描述：

最近在尝试将原本 js 写的代码替换使用 vue 进行开发，除了基本的学习 vue 语法之外，也是进一步体会到了 vue 生态的美妙之处，它有一套简单便捷的 ui 组件和 js 组件，例如 element-ui、例如 vue-router 等等。

问题描述：

在 new Vue 中，我创建如下变量，

其中，constInput、basicInput、labelInput 是用于页面渲染的变量，每个变量对应一个 router 的表单字段。这三个变量中的子元素形式大致如下图，name 表示渲染出来输入框的标签名字，status、type 不做说明了，不用知道。

其中，inputs 是用于记录所有输入框输入的内容。

这是一个典型的 form 表单的应用场景，用户输入由 constInput、basicInput、labelInput 渲染出来的输入框，点击提交，这时候就需要将用户输入的内容提交到格式判断的函数中，这个函数我设计的入参主要是 this.inputs，函数调用如图：

turnValid 就是自定义的验证合法性的函数，这个函数将用户输入的内容通过遍历 inputs 来判断是否包含不合法的输入，如果有不合法的输入，就返回 null；如果合法，就原样返回（基本上是原样）。下面是 turnValid 的实现过程。

嗯，可以看出 params 就是入参的 inputs。我在里面对 tempParams 做了一系列的改动，然后当我运行起来测试代码时，控制台抛出了异常：

很奇怪，我通过输出 inputs，发现变量在 turnValid 这个过程中消失了，所以就 undefined 了，导致前端页面无法渲染出来（前端渲染取决于constInput、basicInput、labelInput，而 inputs 是来存放用户输入的，每个输入框都是有 v-bind 绑定的）。

问题解决：

可以猜测，问题是出在我在 turnValid 虽然将 params 赋值给了 tempParams ，但是这也无济于事，因为入参的 object 是 json 对象，这种复制（包括自定义函数的传参）都是浅复制，举例如下：

A = [1, 2, 3]
B = A
B[0] = 0
// 输出 A B 时会发现都是 [0, 2, 3], 这就是浅复制

我在中间还经过了 tempParams，起初就是以为这样能避免浅复制，实现深复制，还是太天真了。深复制和浅复制就是相反的结果，就不做说明了。

那么如何实现深复制呢？

因为我的 inputs 是 json 或者说 map 格式的，所以我想到了通过 JSON.parse 和 JSON.stringfy 来对参数进行处理，就可以避免复制了。因为传参就是 string 类型的了。这个问题就这样搞定了~

更多实现深复制的方法我这儿也不做总结了，目前想到的和这篇博文差不多。总的来说就是确实基础不扎实吧，有点遗忘了（排错还是排了好久，因为这个项目数据类型比较复杂）。

Talk is cheap, show me the code —— 薪火工作室箴言

散是满天星，聚是兴薪之火。