VUE防抖與節流的最佳解決方案——函數式組件

時間  2019-11-07
標籤 vue 節流 最佳 解決 方案 函數 組件 简体版
原文   原文鏈接

前言

有echarts使用經驗的同窗可能遇到過這樣的場景，在window.onresize事件回調裏觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味着echarts實例會連續的重繪這是很是耗性能的。還有一個常見的場景在input標籤的input事件裏請求後端接口，input事件也是連續觸發的，假設我輸入了「12」就會請求兩次接口參數分別是「1」和「12」，比浪費網絡資源更要命的是若是參數爲「1」的請求返回數據的時間晚於參數爲「12」的接口，那麼咱們獲得的數據是和指望不符的。固然基於axios能夠作不少封裝能夠取消上一個請求或者經過攔截作處理，但仍是從防抖入手比較簡單。html

防抖和節流究竟是啥

函數防抖（debounce）

解釋：當持續觸發某事件時，必定時間間隔內沒有再觸發事件時，事件處理函數纔會執行一次，若是設定的時間間隔到來以前，又一次觸發了事件，就從新開始延時。
案例：持續觸發scroll事件時，並不當即執行handle函數，當1000毫秒內沒有觸發scroll事件時，纔會延時觸發一次handle函數。vue

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函數的原理node

函數節流（throttle）

解釋：當持續觸發事件時，有規律的每隔一個時間間隔執行一次事件處理函數。
案例：持續觸發scroll事件時，並不當即執行handle函數，每隔1000毫秒纔會執行一次handle函數。react

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用來記錄本次執行的時間，下一次事件觸發時判斷時間間隔是否到達預先的設定，重複上述操做。ios

防抖和節流均可以用於 mousemove、scroll、resize、input等事件，他們的區別在於防抖只會在連續的事件週期結束時執行一次，而節流會在事件週期內按間隔時間有規律的執行屢次。element-ui

在vue中的實踐

在vue中實現防抖無非下面這兩種方法axios

  • 封裝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新增的內容，官網的介紹比較晦澀，咱們來看他倆究竟是幹啥的：api

$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事件作防抖處理，這樣在使用上就很是簡單了。

自定義指令 directive

咱們來思考一個問題，函數式組件封裝防抖的關節是獲取vNode，那麼咱們經過自定義指令一樣能夠拿到vNode，甚至還能夠獲得原生的Dom，這樣用自定義指令來處理會更加方便。。。。。。

相關閱讀

$attrs or $listeners cn.vuejs.org/v2/api/#vm-…
函數式組件 cn.vuejs.org/v2/guide/re…
自定義指令 cn.vuejs.org/v2/guide/cu…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程