淺析VUE防抖與節流
防抖和節流到底是啥
函式防抖(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工具
utils.js
let timeout = null function debounce(fn,wait) { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn,wait) } export default debounce
app.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> <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,雖然不需要開發者關注屬性的傳遞,但是在使用上還是不方便的,因為把input封裝在了內部這樣對樣式的限定也比較侷限。有接觸過react高階元件的同學可能有了解,react高階元件本質上是一個函式通過包裹被傳入的React元件,經過一系列處理,最終返回一個相對增強的React元件。那麼在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他是一個包含如下欄位的物件:
- props:提供所有 prop 的物件
- children: VNode 子節點的陣列
- slots: 一個函式,返回了包含所有插槽的物件
- scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的物件。也以函式形式暴露普通插槽。
- data:傳遞給元件的整個資料物件,作為 createElement 的第二個引數傳入元件
- parent:對父元件的引用
- listeners: (2.3.0+) 一個包含了所有父元件為當前元件註冊的事件監聽器的物件。這是 data.on 的一個別名。
- injections: (2.3.0+) 如果使用了 inject 選項,則該物件包含了應當被注入的屬性。
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,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,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,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,before) // 獲取節流函式 vnode.componentOptions.listeners.click = debounceFun } else { console.warn('<debounce> 元件內只能出現下面元件的任意一個且唯一 el-button、el-input、button、input') return vnode } return vnode } }
原理也很簡單就是在vNode中攔截on下面的click、input事件做防抖處理,這樣在使用上就非常簡單了。
自定義指令 directive
我們來思考一個問題,函式式元件封裝防抖的關節是獲取vNode,那麼我們通過自定義指令同樣可以拿到vNode,甚至還可以得到原生的Dom,這樣用自定義指令來處理會更加方便。。。。。。
自定義指令:https://cn.vuejs.org/v2/guide/custom-directive.html
main.js
Vue.directive("dinput",{ bind: function(el,binding,vnode) { let timeout = null; el.addEventListener("input",function() { if (timeout !== null) clearTimeout(timeout); timeout = setTimeout(function() { vnode.context[binding.expression](); },1000); }); } });
vue
<input type="text" v-dinput="myfunc"/>
js
export default { name: "App",data: function() { return { loginuser: null }; },methods: { myfunc() { console.info("myfunc"); } } }
這種方式的缺點
呼叫方法時無法傳參
以上就是淺析VUE防抖與節流的詳細內容,更多關於VUE 防抖與節流的資料請關注我們其它相關文章!