奇技淫巧 - Vue Mixins 高級組件與 Vue HOC 高階組件實踐

時間 2019-11-07

標籤 vue mixins 高級組件 hoc 高階實踐简体版

原文原文鏈接

在項目裏，咱們常常會使用組件庫進行快速開發，然而在過程當中，又不免會遇到對組件庫的改造和拓展，如何優雅且簡單的進行重構，下面讓咱們從一個簡單需求來探索組件的奇技淫巧--Mixins和HOC

項目中使用組件庫遇到的需求

需求: 實現全部頁面按鈕的點擊事件防抖控制html

隨便選用一套組件庫，在此次例子裏，我選用iview進行開發vue

iview官網的Button組件的使用方法以下node

<template>
    <Button @click="click">Default</Button>
</template>
<script>
    export default {
        methods: {
            click () {
                console.log('yes')
            }
        }
    }
</script>

Button的源碼也很簡單,在這裏我剔除了不相關的內容git

<template>
    <button @click="handleClick"></button>
</template>
<script>
    export default {
        name: 'Button',
        components: { Icon },
        props: {
        },
        data () {
        },
        computed: {
        },
        methods: {
            handleClick (event) {
                this.$emit('click', event);
            }
        },
        mounted () {
        }
    };
</script>

從源碼裏能夠獲得如下信息github

iview的Button組件封裝了原生的button組件
對原生的button組件，進行了click事件的綁定
click事件觸發時，向組件emit了click事件

需求怎麼實現

再看看咱們的需求 實現全部頁面按鈕的點擊事件防抖控制,這裏有幾個關鍵點iview

點擊事件，iview的Button組件裏已經對原生的button的click進行了綁定，咱們須要劫持這段綁定，進行防抖
防抖控制，防抖（debounce）函數，網上有不少示例，容易實現

那麼需求的難點就在於，如何實現點擊事件的劫持？在這裏有兩種方案ide

Mixins

1. Mixin是什麼

Mixins 在官方Vue文檔中已經有了很詳細的介紹，不熟悉的朋友們能夠看看，用一句話來理解，即合併組件的組件函數

官方介紹ui

用一張圖來表示
this

2. 怎麼解決需求

直接上源碼

// 防抖函數
function debounce (func, delay, context, event) {
  clearTimeout(func.timer)
  func.timer = setTimeout(function () {
    func.call(context, event)
  }, delay)
}
// iview中click方法拷貝
function _handleClick (event) {
  this.$emit('click', event)
  const openInNewWindow = event.ctrlKey || event.metaKey
  this.handleCheckClick(event, openInNewWindow)
}
// 導出新組件
export default {
  props: {
  },
  mixins: [Vue.options.components.Button], // iview 中Button組件
  data () {
    return {}
  },
  mounted () {
    console.log('mixins succeed')
  },
  methods: {
    handleClick (event) {
      let that = this
      console.log('debounce')
      debounce(_handleClickLink, 300, that, event)
    }
  }
}

3. 原理

mixins的原理很容易理解，上列源碼咱們作了這些操做，來實現合併ivew Button組件，劫持click事件

建立debounce防抖函數
複製iview Button組件中handleClick方法爲_handleClick
導出對象，methods裏重寫handleClick方法，進行防抖控制

使用mixins 來實現咱們需求很簡單，但也所以會有許多問題

須要知道Button源碼結構
帶來了隱式依賴，若是mixins嵌套，會很難理解

那麼有沒有更好的方法？

HOC

1.什麼是HOC?

所謂高階組件其實就是高階函數，React 和 Vue 都證實了一件事兒：一個函數就是一個組件。因此組件是函數這個命題成立了，那高階組件很天然的就是高階函數，即一個返回函數的函數

HOC的詳細介紹和實現，這篇文章探索Vue高階組件有詳細介紹,用一句話來理解，即包裹組件的組件

用一張圖來表示

2. 怎麼解決需求

直接上源碼

// 防抖函數
function debounce (func, delay, context, event) {
  clearTimeout(func.timer)
  func.timer = setTimeout(function () {
    func.call(context, event)
  }, delay)
}
// 導出新組件
export default {
  props: {},
  name: 'ButtonHoc',
  data () {
    return {}
  },
  mounted () {
    console.log('HOC succeed')
  },
  methods: {
    handleClickLink (event) {
      let that = this
      console.log('debounce')
      // that.$listeners.click爲綁定在新組件上的click函數
      debounce(that.$listeners.click, 300, that, event)
    }
  },
  render (h) {
    const slots = Object.keys(this.$slots)
      .reduce((arr, key) => arr.concat(this.$slots[key]), [])
      .map(vnode => {
        vnode.context = this._self
        return vnode
      })
    return h('Button', {
      on: {
        click: this.handleClickLink //新組件綁定click事件
      },
      props: this.$props,
      // 透傳 scopedSlots
      scopedSlots: this.$scopedSlots,
      attrs: this.$attrs
    }, slots)
  }
}