一、安裝
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)
例子：
_.chunk(array, [size=1])
/*將數組（array）拆分成多個 size 長度的區塊，並將這些區塊組成一個新數組。 如果array 無法被分割成全部等長的區塊，那麼最後剩餘的元素將組成一個區塊。*/
//array (Array)需要處理的數組
//[size=1] (number)每個數組區塊的長度
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
三、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>
更多函數操作請看：Lodash函數庫