loadash.cloneDeep()深拷贝解决响应式数据多处使用且类型不一的问题

1.背景：今天做练习项目的时候出现一个情况，一个dom元素的属性绑定了一个响应式数据addForm.goods_cat，类型为数组

<el-form-item label="商品分类" prop="goods_cat">
   <el-cascader expand-trigger="hover" :options="cateList" :props="cateProps"
   v-model="addForm.goods_cat" @change="handlechange"></el-cascader>
</el-form-item>

之后接口需要的参数类型是一个以‘，’逗号分割的字符串，按照一般的思维，一般都会直接这样处理

this.addForm.goods_cat = this.addForm.goods_cat.join(',')

结果就是后台报错！！！！！！！！（前面对数组类型的addForm.goods_cat有进行处理的函数，所以会报错）

2.原因:dom元素绑定的是响应式数据，其他地方的操作会影响他绑定的数据addForm.goods_cat，

3.确立解决办法:深拷贝复制进行操作（个人觉得设置一个变量赋值也可以，懒得试验了），深拷贝的数据和被拷贝的数据不共享内存，所以响应式数据不会被影响

4.实施：

（1）导入loadsh

import _ from 'lodash'

(2)使用_.cloneDeep()方法

 const form = _.cloneDeep(this.addForm)
 // 执行添加的业务逻辑
 form.goods_cat = this.addForm.goods_cat.join(',')
 // 处理动态参数
 this.manyTableData.forEach(item => {
      const newInfo = {
                attr_id: item.attr_id,
                attr_value: item.attr_vals.join(' ')
                }
           console.log('!!!!!!!', this.addForm)
           this.addForm.attrs.push(newInfo)
       })