一、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,那么相等