VUE中LODASH的简介、安装及_.CLONEDEEP（VALUE）深拷贝的使用

 

一、LODASH简介

Lodash是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。

二、如何安装LODASH

在VUE中安装

1.使用vue-cli可视化工具安装插件：

2.使用npm工具安装：

npm i -save lodash \\全局安装

• 1

这两种安装方法选择其一即可，安装完成后，即可导入使用。。。

在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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

在上面的示例中我运用了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

• 1
• 2
• 3
• 4
• 5

返回false的原因：两个值引用的不是同一个对象，所以不相等

注：三等号 ‘===’ 的比较过程：
　　（1）如果类型不同，就一定不相等
　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
　　（4）如果两个值都是true，或是false，那么相等
　　（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等
　　（6）如果两个值都是null，或是undefined，那么相等