1. 观察者防抖
1. 在 create() 钩子 里,创建 防抖回调,并将其赋值到实例上:this.debouncedWatch = debounce(…, 500)。
2. 在 观察者 回调 watch.value() { … } 中 传入正确的参数 调用 this.debouncedWatch()。
3. 最后,beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ,在卸载组件之前,取消所有还在 pending 的 防抖函数执行。
<template>
<input v-model="value" type="text" />
<p>{{ value }}</p>
</template>
<script>
import _ from "lodash";
export default {
data() {
return {
value: "",
};
},
watch: {
value(...args) {
this.debouncedWatch(...args);
},
},
created() {
this.debouncedWatch = _.debounce((newValue, oldValue) => {
console.log('New value:', newValue);
}, 500);
},
beforeUnmount() {
this.debouncedWatch.cancel();
},
};
</script>
2. 事件处理器 防抖
1. 在 create() 钩子 里,创建实例后,立刻将 防抖回调 debounce(event => {…}, 500) 赋值到 this.debouncedHandler 。
2. 在输入框的 template 中 给 v-on:input 赋上 debouncedHandler :
3. 最后,在卸载组件之前, 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ,取消所有还在 pending 的 函数调用。
<template>
<input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import _ from "lodash";
export default {
created() {
this.debouncedHandler = _.debounce(event => {
console.log('New value:', event.target.value);
}, 500);
},
beforeUnmount() {
this.debouncedHandler.cancel();
}
};
</script>
参考: https://juejin.cn/post/7034458741990752287