前言
有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工具
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新增的內容,官網的介紹比較晦澀,我們來看他倆到底是幹啥的:
$attrs:
父組件在調用子組件的時候會在子組件上綁定很多屬性,然後在子組件裏通過props註冊使用,那麼沒有被props註冊的就會放在$attrs
裏,當然不包括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他是一個包含如下字段的對象:
- 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,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事件做防抖處理,這樣在使用上就非常簡單了。
作者:船長_
鏈接:https://juejin.im/post/5ce3e400f265da1bab298359
來源:掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。