Vue3/ Vue3 和 Vue2 lodash 解决防抖 搜索框 场景

一.  Vue3 和 Vue2  lodash 解决防抖 搜索框 场景

 首先 npm install lodash 下载

 然后 import form 引入 下载后的 lodash 

import lodash form 'lodash'

1. Vue里面防抖一般使用在 watch 和 method 上面 (防抖是单位时间内 只执行最后一次函数 一般用在搜索框优化上面)
2. 一般用两种写法

• 在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)