Vue的变量赋值后双向绑定问题

问题提出

在指定一个表单的时候，我本来的想法是通过设置一个空对象对原本中途停止填写的表格进行格式化，也就是如果提交一个新表格的时候回事全部为空的情况。因此我使用了

this.formItem = this.formItem1

但最终的结果让我大跌眼镜

我原本设置的formItem1是空的，填写表格的时候对formItem进行动态赋值，但点击取消重新再点击想要新增公告的时候，我希望将空的值赋予formItem，我发现打开的表单总是保留着上次填写留下的数据，那这是为什么呢？经过搜索发现，vue中的变量赋值是会双向绑定的

常见的变量双向绑定

变量双向绑定在我们使用Vue的时候经常会遇到，举一个最简单的例子，当我们遇到对接口进行HTTP请求的时候，我们写的axios的GET代码可能是下面的样式：（以在Vue中created()部分的代码为例）

created(){ const _this = this; axios.get(url).then(function (resp){ console.log(resp); _this.data = resp.data.data.content; _this.total = resp.data.data.totalElements; }) },

我们可曾想过，若不是变量双向绑定的原因，我们所赋予的_this不就成了过去的this了吗， 我们在赋予 _this新数据的时候，我们又为什么能够在之后能够在this中调用呢？这就是变量双向绑定展现的作用

但有时候，我们其实并不需要他…

如何禁用变量的双向绑定呢？

方法一

利用JSON.parse和JSON.stringify

this.list= JSON.parse( JSON.stringify(this.list2) )

方法二

我是用的正是此方法

this.list= { ...this.list2} this.arr= [...this.arr2]