vue-mixins和vue高阶组件

咱们在开发过程当中，由于需求的变动，每每会碰见对现有组件的改造和扩展。

那么咱们有什么方法对现有组件进行改造和扩展呢？

常见的咱们能够使用mixins方式

下面就让咱们来看一下怎么使用mixins方式对组件进行改造

咱们来先建立一个简单的组件，如一个button和一个数字，点击一次数字加一

<template>
  <div class="home">
    <p>{{ count }}</p>
    <button @click="addcount()">新增</button>
  </div>
</template>

<script> export default { name: 'homeworld', data () { return { count: 0 } }, methods: { addcount () { this.count++; } } } </script>

若是咱们如今想改变需求，点击按钮，数字新增，可是新增个人值咱们本身定义

使用mixins实现，下面是改造事后的组件

<script> import helloworld from './HelloWorld' export default { name: 'homeworld', props: ['index'], // index为传入的数量
 mixins: [helloworld], // mixins 原先的组件
 methods: { //重写 addcount 方法
 addcount () { this.count += parseInt(this.index); } } } </script>

若是咱们调用下面的组件而且传入属性index=5, 那么咱们就会实现没点击一次count+5

使用mixins咱们确实能够实现对现有组件的改造，可是他也是有一些缺点的，

1.咱们必需要知道改造组件的内部结构，就如咱们不知道点击事件名，那么咱们就不能重写新的点击事件，咱们也须要知道组件的内部属性等等。

2.两个组件有很强的依赖性，若是是嵌套加嵌套，代码就很难去追寻本源，太乱了。

那么咱们有没有更好的方法去对组件进行扩展呢？

答案是有的咱们能够使用高级组件，专业术语是HOC,其实就是包裹组件的组件

其实常见的高阶组件咱们常常使用，如keep-alive, transition，一个是缓存组件，一个是动画

Vue目前仍是使用mixin做为官方的组件复用方式。

若是想了解更多的hot能够看看这篇文章

https://github.com/coolriver/coolriver-site/blob/master/markdown/vue-mixin-hoc.md

1. 暂时由热心人士产出了一个npm包: vue-hoc来帮助Vue方便地实现HOC.
2. 官方暂时不考虑将HOC加入vue core中，由于以为相比于mixin的优点不够巨大。

本身也试了一些，感受hoc达不到本身想要的那种效果。可能仍是本身不够理解。