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

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

回到顶部