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達不到自己想要的那種效果。可能還是自己不夠理解。