vue3使用防抖和节流
Vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现。安装Lodashyarn add lodashnpm install lodash --save导入Lodash<template><button @click="btnClick">节流</button><button @click="btnClick2">防抖</butt
·
Vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现。
安装Lodash
yarn add lodash
npm install lodash --save
导入Lodash
<template>
<button @click="btnClick">节流</button>
<button @click="btnClick2">防抖</button>
</template>
<script>
import _ from "lodash";
export default {
name: "",
setup() {
// 节流
const btnClick = _.debounce(function() {
// ....
console.log('节流');
}, 2000);
// 防抖
const btnClick2 = _.throttle(function() {
// ....
console.log('防抖');
}, 2000);
return {
btnClick,
btnClick2,
};
},
};
</script>
<style scoped></style>
但是,这种方法对于可复用组件有潜在的问题,因为它们都共享相同的防抖函数。为了使组件实例彼此独立,可以在生命周期钩子的 created 里添加该防抖函数:
app.component('save-button', {
created() {
// 用 Lodash 的防抖函数
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 移除组件时,取消定时器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 响应点击 ...
}
},
template: `
<button @click="debouncedClick">
Save
</button>
`
})
更多推荐
已为社区贡献3条内容
所有评论(0)