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

  • 相关阅读:
    在c#中使用全局快捷键
    把其他C/C++编译器集成到VC2005中
    零基础学习Oracle 10G视频教程
    异常处理 Exception
    序列化与反序列化 BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)
    MVC 数据验证
    MVC 路由规则
    分部类,分部方法 修饰符partial
    HttpRuntime类
    MVC 模型绑定
  • 原文地址:https://www.cnblogs.com/onesea/p/15437521.html
Copyright © 2020-2023  润新知