VUE中LODASH的簡介、安裝及_.CLONEDEEP（VALUE）深拷貝的使用

 

一、LODASH簡介

Lodash是一個意在提高開發者效率,提高JS原生方法性能的JS庫。簡單的說就是，很多方法lodash已經幫你寫好了，直接調用就行，不用自己費盡心思去寫了，而且可以統一方法的一致性。Lodash使用了一個簡單的 _ 符號，就像Jquery的 $ 一樣，十分簡潔。

二、如何安裝LODASH

在VUE中安裝

1.使用vue-cli可視化工具安裝插件：

2.使用npm工具安裝：

npm i -save lodash \\全局安裝 

這兩種安裝方法選擇其一即可，安裝完成后，即可導入使用。。。

在VUE中導入使用

1.導入方法

在App.vue中

<template> <el-cascader v-model="goods_cat" :options="cateList" :props="cateProps" @change="handleChange" ></el-cascader> </template> <script> import _ from 'lodash' //導入loadsh插件 export default { data() { return { goods_cat: [] } }, methods:{ add() { // 深拷貝lodash cloneDeep(obj) const form = _.cloneDeep(goods_cat) form = form.join(',') console.log(form) }) } } } </script> 

在上面的示例中我運用了lodash中的深拷貝方法，此處使用深拷貝的原因是：
在data中goods_cat動態綁定到級聯選擇器的v-model中，且goods_cat數據類型為數組，當想將goods_cat以字符串形式打印出來時，編譯器會報錯。

錯誤為級聯選擇器中goods_cat的數據類型錯誤，所以動態綁定的數據需要復制出一份，且與原來的goods_cat不相關

這時就需要用到loadsh中的cloneDeep深拷貝方法

2._.CLONEDEEP（VALUE）方法介紹

參數

value (*): 要深拷貝的值。

返回

(*): 返回拷貝后的值。

例子：

var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects); console.log(deep[0] === objects[0]); // => false 

返回false的原因：兩個值引用的不是同一個對象，所以不相等

注：三等號 ‘===’ 的比較過程：
　　（1）如果類型不同，就一定不相等
　　（2）如果兩個都是數值，並且是同一個值，那么相等；如果其中至少一個是NaN，那么不相等。（判斷一個值是否是NaN，只能使用isNaN( ) 來判斷）
　　（3）如果兩個都是字符串，每個位置的字符都一樣，那么相等，否則不相等。
　　（4）如果兩個值都是true，或是false，那么相等
　　（5）如果兩個值都引用同一個對象或是函數，那么相等，否則不相等
　　（6）如果兩個值都是null，或是undefined，那么相等