项目使用lodash（深拷贝）的方法

Vue项目使用lodash（深拷贝）的方法

Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。

https://www.lodashjs.com/

1.安装

npm install lodash -S

2.导入

(1)方式一:在main.js中导入

//全部导入
import _ from 'lodash'
//只导入需要的模块
import cloneDeep from "lodash/cloneDeep";

挂载到vue原型上
Vue.prototype._ = _  //全部导入的挂载方式
Vue.prototype.cloneDeep = cloneDeep //导入某个功能的挂载方式

（2）组件中推荐使用的方法-直接引入使用

安装
$ npm i --save lodash

使用
import lodash from 'lodash'
const obj=cloneDeep(objects)

3.在需要的组件中使用

<script>
export default {
  data() {
    return {
      test: {
        name: "123",
        age: 18,
        friends: {
          name: "zhansgan",
          age: 13,
          grilFriend: {
            name: "hanmeimei",
            age: 12,
          },
        },
      },
    };
  },
  mounted() {
    this.cloneDeepDemo();
  },
  methods: {
    // 封装一个深度克隆的函数
    cloneDeepDemo() {
      var that = this;
      let deep = this.cloneDeep(that.test);
    },
  },
};
</script>

现在得到的deep对象就是深度克隆以后的独立对象了，他和data中的test对象有同样的字段但是却是两个独立的个体

注意：

   在我的项目中：有个表单form，里面好几个表单，点击提交按钮的时候需要传给后端。但是这个里面的某个goods_cat属性已经绑定到了表的v-model属性，data里定义了addForm：{ goods_cat ： [ ] } 空数组。提交给后端的时候要求字符串。但是已经v-model绑定到的是casscader级联选择器属性。就出现了一个属性需要两种格式使用。这个时候就需要lodash深拷贝来拷贝一份。拷贝出来的join方法老转换成字符串使用就可以。

   this.$refs.addFormRef.validate(valid => {
        if (!valid) {
          return this.$message.error('请输入合法的表单内容')
        }
        // 表单验证合法的话---走逻辑处理发起请求
        // this.addForm.goods_cat=  this.addForm.goods_cat.join(',')
        // 但是上面的方法是会报错，是因为goods_cat已经绑定到了cascader级联选择器，他需要数组，但是到了这个函数的
        // 时候就变成了字符串-，所以报错。需要lodash老深拷贝
       const form =_.cloneDeep(this.addForm)
        form.goods_cat = form.goods_cat.join(',')
        console.log(form)
      })