<template> <debounce time="300" :before="beforeFun"> <input type="text" v-model="inpModel" @input="inputChange"/> </debounce> </template> <script> import debounce from './debounce' export default { data() { return { inpModel: 1 } }, methods: { inputChange(e){ console.log(e.target.value, '防抖') }, beforeFun(e){ console.log(e.target.value, '不防抖') } }, components: { debounce } } </script>
原理也很简单就是在vNode中拦截on下面的click、input事件做防抖处理，这样在使用上就非常简单了。
自定义指令 directive
我们来思考一个问题，函数式组件封装防抖的关节是获取vNode，那么我们通过自定义指令同样可以拿到vNode，甚至还可以得到原生的Dom，这样用自定义指令来处理会更加方便。。。。。。