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，那么相等