Vue中使用Lodash实现防抖和节流

Vue中使用Lodash实现防抖和节流

Lodash实现防抖和节流。

防抖

为了实现lodash组件独立,需要在 created 中添加函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
app.component('save-button', {
created() {
// 使用 Lodash 实现防抖
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 移除组件时,取消定时器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 响应点击 ...
}
},
template: `
<button @click="debouncedClick">
Save
</button>
`
})

ref

  1. https://www.lodashjs.com/

评论