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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 

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

以上是 VUE中LODASH的简介、安装及_.CLONEDEEP（VALUE）深拷贝的使用 的全部内容， 来源链接： utcz.com/z/380189.html

回到顶部