vue使用lodash

2020-01-04 08:05:05

推荐第二种,方便,好用  参考地址 vue如何引入lodash

一、安装

cnpm i lodash -S

二、方法一

1、引入

import _ from 'lodash'Vue.prototype._ = _

2、使用

this._.debounce(this.handleClick,1000,false)

二、方法二

1、引入

let _ = require('lodash')

2、使用

_.debounce(this.handleClick,1000,false)

三、vue单文件组件中使用

里面分别有我自己写的debounce函数和lodash的debounce函数,效果一样!

<template>
  <div>
    <el-button @click="myDebounce">我的debounce</el-button>
    <el-button @click="_debounce">lodash的debounce</el-button>
  </div></template><script>import { debounce } from '@/utils/util'
let _ = require('lodash')
export default {
  methods: {
    handleClick1() {
      console.log(`真正执行的函数,次数比较少:handleClick1.....`)
    },
    handleClick2() {
      console.log(`真正执行的函数,次数比较少:handleClick2.....`)
    },
    myDebounce() {
      console.log(`myDebounce.....`)
      this.DB()
    },
    _debounce() {
      console.log(`_debounce.....`)
       this._DB()
    }
  },
  created() {
    this.DB = debounce(this.handleClick1, 1000, false)
    this._DB = this._.debounce(this.handleClick2,1000,false)
  }
}</script>


debounce测试.png


注意:以前我是在data选项里面定义DB:null,然后再methods里面初始化函数,但是需要判断‘如果有了就不赋函数,如果为空就赋’,发现比较麻烦;后来直接在created钩子里面定义,就很方便了!




  • 2021-01-16 09:45:19

    tabbar的titlePositionAdjustment设置文字距离

    指定相应的数据去偏移一个位置,向右或者向下为正值,向左或者向上为负值,不过首先你得有一个相对位置的坐标。而tabbarItem文字的坐标是底部为x轴,y轴则是tabbarItem的centerX;

  • 2021-01-16 09:49:13

    Cocoapods如何查看项目中引入库的版本号

    项目中已经安装过Cocoapods,并生成了Podfile.lock文件。 打开终端,cd命令切换到项目中的Podfile.lock文件目录下,执行命令:cat Podfile.lock 即可。也可以用文本方式打开 Podfile.lock 文件。示例如下:

  • 2021-01-18 13:50:21

    vue实现粘贴功能

    paste事件就是粘贴事件 需要通过clipboardData获得粘贴的内容

  • 2021-01-18 15:12:57

    flex和inline-flex区别

    flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示