element-plus
element-plus 功能非常强大，但是好像只有 el-autocomplete 提供了一个防抖功能，其他表单子控件并没有提供防抖功能，而 el-autocomplete 的防抖和我想要的效果又不太一样，所以只好写个函数实现我想要的防抖效果。
需求
Vue是响应性和双向绑定的，用户在文本框输入一个字母，就会立即响应，如果是表单的话问题不大，但是如果是查询的话，就有点不方便。
比如用户想查询“Vue”：输入 v 后立即响应，去后端查询“v”；然后输入u，又立即响应去后端查询“vu”；然后输入e，又立即响应去后端查询“vue”。
显然只有最后一次查询才是我们希望的，而前两次是无效查询。
如果响应时不立即查询的话，那么就需要用户在输入完毕后，还要去按“查询”按
钮，这样多了一步操作，不是很方便。
这时候就需要防抖功能出场了。
功能
- 支持 el-input 的防抖
- 支持 el-checkbox-group 等其他表单子控件的防抖
- 支持汉字输入的防抖
- 使用简单，可以灵活设置
技术栈
- Vue3.2
- Vite2
- element-plus
设计函数
原始防抖代码来自于Vue官网，介绍 customRef（https://v3.cn.vuejs.org/api/refs-api.html#customref）时使用的例子，感觉挺简洁的，于是就拿过来改了改。
核心代码：（来自Vue官网）
function useDebouncedRef(value, delay = 200) { let timeout return customRef((track, trigger) => { return { get () { track() return value }, set (newValue) { clearTimeout(timeout) timeout = setTimeout(() => { value = newValue trigger() }, delay) } } }) }
是不是很简单，就是用 setTimeout 设置一个延迟提交的功能，然后每次 set 先把之前的 setTimeout 给撤销掉，这样就只保留最后一次的 setTimeout 。
这个函数用在原生 input 上面是没有问题的，但是放在 el-input 里面，就出现了一点小问题，防抖后只会出现最后一次按的字母，之前输入的字母“消失”了。输入汉字也是很怪异的样子。
用console.log在 set 和 ge t的地方分别打印 value、newValue 值，对比一下发现了问题。
- 原生 input
触发 set 的时候，newValue 的值 = 原来的值 + 录入的全部值。input 实时显示录入内容，但是 model 延迟后才会响应变化。 - el-input
触发 set 的时候，newValue 的值 = 原来的值 + 录入的最后一个值（先敲的消失了）。el-input 并不会实时显示录入内容，而是等延迟后才会更新的内容。
发现不同后我们就可以想办法解决问题了，我们建立一个 debounceRef.js 的文件：
debounceRef.js
import { customRef, watch } from'vue' /** * 控件的防抖输入 * @param { object } props 组件的 props * @param { object } events 事件集合，run：立即提交；clear：清空计时，用于汉字输入 * @param { object } emit 组件的 emit * @param { number } delay 延迟时间，默认500毫秒 * @param { string } name v-model的名称，默认 modelValue，用于emit */ const debounceRef = (props, events = {}, emit = () => {}, delay = 500, name = 'modelValue') => { // 计时器 let timeout = null // 内部变量，直接给控件赋值。 // 初始化设置属性值 let _value = (typeof props.model === 'object') ? props.model[props.colName] : props[name] // 提交给属性 const _setValue = (__val) => { if (typeof props.model === 'object') { props.model[props.colName] = __val } else { emit(`update:${name}`, __val) } } /** * 立即提交的事件 */ events.run = () => { clearTimeout(timeout) // 清掉上一次的计时 _setValue(_value) } /** * 清掉上次计时，用户汉字的连续输入 */ events.clear = () => { clearTimeout(timeout) // 清掉上一次的计时 } return customRef((track, trigger) => { // 监听父组件的属性变化，然后赋值 if (typeof props.model === 'object') { watch(() => props.model[props.colName], (v1) => { _value = v1 trigger() }) } else { watch(() => props[name], (v1) => { _value = v1 trigger() }) } return { get () { track() return _value }, set (val) { _value = val // 绑定值 trigger() // 输入内容绑定到控件，但是不提交 clearTimeout(timeout) // 清掉上一次的计时 timeout = setTimeout(() => { _setValue(val) // 提交 }, delay) } } }) } exportdefault debounceRef
因为这是基于二次封装组件设置的函数，所以参数涉及了组件的 props 和 emit ，有的时候再次封装一下，可以让代码更简洁。
- 防抖输入
设置一个内部变量 _value ，用于保存输入的内容，直接给组件赋值。同时用 watch 监听属性的变化，有变化了就赋值给 _value，然后调用 trigger() 更新模板。这样可以达到一种比较好的体验效果，el-input 可以实时显示录入的信息，外部也可以通过属性进行赋值。 - 汉字的问题
一般的汉字输入法，在敲字的时候，并不会立即触发 set，这样造成输入英文、数字和输入汉字的延迟时间不一致的问题。解决方法就是设置“键盘按下”事件，在事件里面清除 setTimeout （使用 clear 事件实现），这样就可以保持输入英文和汉字是一样的时间延迟了。 - 立即提交的问题
输入完毕后希望立即提交，而不必等到延迟时间到了再提交，这里的解决方案是加处理事件。el-input 提供了几个事件，比如失去焦点，按回车等事件，那么可以在这些事件里面清除 setTimeout ，然后立即提交即可，通过 run 函数实现。
