前言
有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts實例會連續的重繪這是非常耗性能的。還有一個常見的場景在input標簽的input事件里請求后端接口，input事件也是連續觸發的，假設我輸入了“12”就會請求兩次接口參數分別是“1”和“12”，比浪費網絡資源更要命的是如果參數為“1”的請求返回數據的時間晚于參數為“12”的接口，那么我們得到的數據是和期望不符的。當然基于axios可以做很多封裝可以取消上一個請求或者通過攔截做處理，但還是從防抖入手比較簡單。
防抖和節流到底是啥
函數防抖（debounce）
解釋：當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數才會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新開始延時。
案例：持續觸發scroll事件時，并不立即執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發一次handle函數。
function debounce(fn, wait) { let timeout = null return function() { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait); }}function handle() { console.log(Math.random())}window.addEventListener('scroll', debounce(handle, 1000))addEventListener的第二個參數實際上是debounce函數里return回的方法，let timeout = null 這行代碼只在addEventListener的時候執行了一次 觸發事件的時候不會執行，那么每次觸發scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器，當scroll事件停止觸發后最后一次記錄的延時器不會被清除可以延時執行，這是debounce函數的原理
函數節流（throttle）
解釋：當持續觸發事件時，有規律的每隔一個時間間隔執行一次事件處理函數。
案例：持續觸發scroll事件時，并不立即執行handle函數，每隔1000毫秒才會執行一次handle函數。
function throttle(fn, delay) { var prev = Date.now() return function() { var now = Date.now() if (now - prev > delay) { fn() prev = Date.now() } } } function handle() { console.log(Math.random()) }window.addEventListener('scroll', throttle(handle, 1000))原理和防抖類似，每次執行fn函數都會更新prev用來記錄本次執行的時間，下一次事件觸發時判斷時間間隔是否到達預先的設定，重復上述操作。
防抖和節流都可以用于 mousemove、scroll、resize、input等事件，他們的區別在于防抖只會在連續的事件周期結束時執行一次，而節流會在事件周期內按間隔時間有規律的執行多次。
在vue中的實踐
在vue中實現防抖無非下面這兩種方法
封裝utils工具
把上面的案例改造一下就能封裝一個簡單的utils工具
utils.js
let timeout = nullfunction debounce(fn, wait) { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait)}export default debounceapp.js
<input type="text" @input="debounceInput($event)">import debounce from './utils'export default { methods: { debounceInput(E){ debounce(() => { console.log(E.target.value) }, 1000) } }}封裝組件
至于組件的封裝我們要用到$listeners、$attrs這兩個屬性，他倆都是vue2.4新增的內容，官網的介紹比較晦澀，我們來看他倆到底是干啥的：
$listeners: 父組件在綁定子組件的時候會在子組件上綁定很多屬性，然后在子組件里通過props注冊使用，那么沒有被props注冊的就會放在$listeners里，當然不包括class和style，并且可以通過 v-bind="$attrs" 傳入子組件的內部組件。
$listeners: 父組件在子組件上綁定的不含.native修飾器的事件會放在$listeners里，它可以通過 v-on="$listeners" 傳入內部組件。
簡單來說$listeners、$attrs他倆是做屬性和事件的承接，這在對組件做二次封裝的時候非常有用。
我們以element-ui的el-input組件為例封裝一個帶防抖的debounce-input組件
debounce-input.vue
<template> <el-input v-bind="$attrs" @input="debounceInput"/></template><script>export default { data() { return { timeout: null } }, methods: { debounceInput(value){ if(this.timeout !== null) clearTimeout(this.timeout) this.timeout = setTimeout(() => { this.$emit('input', value) }, 1000) } }}</script>app.vue
<template> <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input></template><script>import debounceInput from './debounce-input'export default { methods: { inputEve(value){ console.log(value) } }, components: { debounceInput }}</script>上面組件的封裝用了$attrs，雖然不需要開發者關注屬性的傳遞，但是在使用上還是不方便的，因為把el-input封裝在了內部這樣對樣式的限定也比較局限。有接觸過react高階組件的同學可能有了解，react高階組件本質上是一個函數通過包裹被傳入的React組件，經過一系列處理，最終返回一個相對增強的React組件。那么在vue中可以借鑒這種思路嗎，我們來了解一下vue的函數式組件。
關于vue函數式組件
什么是函數式組件？
函數式組件是指用一個Function來渲染一個vue組件，這個組件只接受一些 prop，我們可以將這類組件標記為 functional，這意味著它無狀態 (沒有響應式數據)，也沒有實例 (沒有this上下文)。
一個函數式組件大概向下面這樣：
export default () => { functional: true, props: { // Props 是可選的 }, // 為了彌補缺少的實例, 提供第二個參數作為上下文 render: function (createElement, context) { return vNode }}注意：在 2.3.0 之前的版本中，如果一個函數式組件想要接收 prop，則 props 選項是必須的。在 2.3.0 或以上的版本中，你可以省略 props 選項，所有組件上的特性都會被自動隱式解析為 prop。但是你一旦注冊了 prop 那么只有被注冊的 prop 會出現在 context.prop 里。
render函數的第二個參數context用來代替上下文this他是一個包含如下字段的對象：
vm.$slots API 里面是什么
slots用來訪問被插槽分發的內容。每個具名插槽 有其相應的屬性 (例如：v-slot:foo 中的內容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在具名插槽中的節點，或 v-slot:default 的內容。
slots() 和 children 對比
你可能想知道為什么同時需要 slots() 和 children。slots().default 不是和 children 類似的嗎？在一些場景中，是這樣――但如果是如下的帶有子節點的函數式組件呢？
<my-functional-component> <p v-slot:foo> first </p> <p>second</p></my-functional-component>
對于這個組件，children 會給你兩個段落標簽，而 slots().default 只會傳遞第二個匿名段落標簽，slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots()，因此你可以選擇讓組件感知某個插槽機制，還是簡單地通過傳遞 children，移交給其它組件去處理。
一個函數式組件的使用場景
假設有一個a組件，引入了 a1,a2,a3 三個組件，a組件的父組件給a組件傳入了一個type屬性根據type的值a組件來決定顯示 a1,a2,a3 中的那個組件。這樣的場景a組件用函數式組件是非常方便的。那么為什么要用函數式組件呢？一句話：渲染開銷低，因為函數式組件只是函數。
用函數式組件的方式來實現防抖
因為業務關系該防抖組件的封裝同時支持 input、button、el-input、el-button 的使用，如果是input類組件對input事件做防抖處理，如果是button類組件對click事件做防抖處理。
const debounce = (fun, delay = 500, before) => { let timer = null return (params) => { timer && window.clearTimeout(timer) before && before(params) timer = window.setTimeout(() => { // click事件fun是Function input事件fun是Array if (!Array.isArray(fun)) { fun = [fun] } for (let i in fun) { fun[i](params) } timer = null }, parseInt(delay)) }}export default { name: 'Debounce', functional: true, // 靜態組件 當不聲明functional時該組件同樣擁有上下文以及生命周期函數 render(createElement, context) { const before = context.props.before const time = context.props.time const vnodeList = context.slots().default if (vnodeList === undefined){ console.warn('<debounce> 組件必須要有子元素') return null } const vnode = vnodeList[0] || null // 獲取子元素虛擬dom if (vnode.tag === 'input') { const defaultFun = vnode.data.on.input const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數 vnode.data.on.input = debounceFun } else if (vnode.tag === 'button') { const defaultFun = vnode.data.on.click const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數 vnode.data.on.click = debounceFun } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') { const defaultFun = vnode.componentOptions.listeners.input const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數 vnode.componentOptions.listeners.input = debounceFun } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') { const defaultFun = vnode.componentOptions.listeners.click const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數 vnode.componentOptions.listeners.click = debounceFun } else { console.warn('<debounce> 組件內只能出現下面組件的任意一個且唯一 el-button、el-input、button、input') return vnode } return vnode }}<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，這樣用自定義指令來處理會更加方便。。。。。。
相關閱讀
$attrs or $listeners https://cn.vuejs.org/v2/api/#vm-attrs
函數式組件 https://cn.vuejs.org/v2/guide/render-function.html#函數式組件
自定義指令 https://cn.vuejs.org/v2/guide/custom-directive.html
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
