在项目里，我们经常会使用组件库进行快速开发，然而在过程中，又难免会遇到对组件库的改造和拓展，如何优雅且简单的进行重构，下面让我们从一个简单需求来探索组件的奇技淫巧–Mixins和HOC项目中使用组件库遇到的需求需求: 实现所有页面按钮的点击事件节流控制随便选用一套组件库，在这次例子里，我选用iview进行开发iview官网的Button组件的使用方法如下<template> <Button @click=“click”>Default</Button></template><script> export default { methods: { click () { console.log(‘yes’) } } }</script>Button的源码也很简单,在这里我剔除了不相关的内容<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>从源码里可以得到以下信息iview的Button组件封装了原生的button组件对原生的button组件，进行了click事件的绑定click事件触发时，向组件emit了click事件需求怎么实现再看看我们的需求 实现所有页面按钮的点击事件节流控制,这里有几个关键点点击事件，iview的Button组件里已经对原生的button的click进行了绑定，我们需要劫持这段绑定，进行节流节流控制，节流（debounce）函数，网上有很多示例，容易实现那么需求的难点就在于，如何实现点击事件的劫持？在这里有两种方案Mixins1. Mixin是什么Mixins 在官方Vue文档中已经有了很详细的介绍，不熟悉的朋友们可以看看，用一句话来理解，即合并组件的组件官方介绍用一张图来表示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嵌套，会很难理解那么有没有更好的方法？HOC1.什么是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) }}3. 原理HOC的特点在于它的包裹性，上列源码我们做了这些操作，来实现包裹iview的Button组件，劫持click事件创建debounce节流函数导出新的组件render渲染出iview ButtonButton 绑定debounce后的click方法HOC的包裹性同时也会带来几个问题组件之间通信会被拦截，比如子组件访问父组件的方法(this.$parent.methods)vue官方并没有推荐使用HOC :(总结Mixins 和 HOC 都能实现这个简单的需求，希望大家能理解这两种技巧，解决项目中的问题源码：https://github.com/warpcgd/mi…demo：https://warpcgd.github.io/mix…
...