Vue中使⽤函数防抖情况
在最近的项⽬，遇到⼀个需求是要监控表单输⼊改变的时候,⾃动计算另⼀个表单项的值.
⾥⾯需要⼤量的循环和判断，导致页⾯卡顿，特别是连续输⼊的时候，整个页⾯甚⾄可能卡死.经过多次尝试，都有this指向问题,⽽导致没有得到预期的效果.
解决
最终使⽤lodash⾥⾯的防抖函数debounce得以解决，其中还有两个注意的关键点就是,
创建的防抖函数，不是在methods⾥⾯定义,⽽是写在data⾥⾯定义.
然后在created()或者beforeMount()创建防抖⽅法，接着把原来的⽅法替换成防抖⽅法即可.以下是粗略的关键代码:
export default {
data() {
// 防抖⽅法
debounceHandleValuesChange: undefined
},
beforeMount() {
// 设置防抖⽅法(周期内按下多次只会执⾏最后⼀次)
// 注意: 这⾥只需要传⼊函数就⾏了(不⽤写括号参数，写了就是执⾏)
lodash有哪些方法
this.debounceHandleValuesChange = debounce(this.handleValuesChange, 800)    },
methods: {
// 原来多次重复使⽤的⽅法
handleValuesChange(values,index,name) {
// ...逻辑
// ⾥⾯有⼀些有this的操作...
console.log(this.msg)
},
// 把原来的⽅法替换成debounce返回的防抖⽅法即可
xxx() {
this.form = this.$ateForm(
this,
{
onValuesChange: (_, values) => {
this.$nextTick(() => {
// this.handleValuesChange(          // 原来的⽅法
this.debounceHandleValuesChange(    // 防抖⽅法
values,
index,
name
)
})
}
}
)
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。