vue使用lodash
一、安装
|
1 |
cnpm i lodash -S |
二、方法一
1、引入
|
1 2 |
import _ from 'lodash' Vue.prototype._ = _ |
2、使用
|
1 |
this._.debounce(this.handleClick,1000,false) |
二、方法二
1、引入
|
1 |
let _ = require('lodash') |
2、使用
|
1 |
_.debounce(this.handleClick,1000,false) |
三、vue单文件组件中使用
里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！
|
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 30 31 32 33 |
<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钩子里面定义，就很方便了！
作者：斐鸽传书
链接：https://www.jianshu.com/p/907e8a0ee5d7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。