一. Vue3 和 Vue2 lodash 解决防抖 搜索框 场景
首先 npm install lodash 下载
然后 import form 引入 下载后的 lodash
import lodash form 'lodash'
- Vue里面防抖一般使用在 watch 和 method 上面 (防抖是单位时间内 只执行最后一次函数 一般用在搜索框优化上面)
- 一般用两种写法
- 在created 里面 在this上定义一个新函数 接收debounce的返回值
- 在methods里面定义方法的时候 不推荐 因为如果这个组件在当前页面使用多次 那么防抖可能出现故障 这个就类似于 data 为什么必须是一个函数的问题 , 组件每次新建都必须是一个地址 防抖也不例外
3.关于watch的调用 还需要注意在 离开当前组件之前 最后一次防抖函数 需要手动调用 cance取消 或者 flush 立即执行 (在destroyed 钩子函数里面 已经优化三个了 remove事件绑定 , clearinterval清除定时器 , 取消防抖的函数执行)
$1. vue3 里面定义方法的时候,直接在setup里面使用 防抖函数包裹一下
const 变量名 = lodash.debounce(() => {
console.log(val.value);
}, 500)
$2. Vue2里面有两种方法
第一种:
在 created 里面 有this上定义一个新函数 接收debounce的返回值
created(){
this.debounceInput = this.debounce(this.handle, 1000,false)
}
第二种:
在methods里面定义方法的时候 不推荐 因为如果这个组件在当前页面使用的多次 那么防抖可能出现故障 这个就类似用于 data 为什么必须一个函数的问题 组件每次新建 都必须是一个新地址 防抖也不例外
changeValue: _.debounce((e) => {
console.log(e, this);
}, 500)