項目使用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)
      })