轉到用 Typescript 寫 Vue 應用以后，經過一輪工具鏈和依賴的洗禮，總算蹣跚地能走起來了，不過有一個很常用的功能 mixin，似乎還沒有官方的解決方案。
既想享受 mixin 的靈活和方便，又想收獲 ts 的類型系統帶來的安全保障和開發時使用 IntelliSense 的順滑體驗。
vuejs 官方組織里有一個 'vue-class-component' 以及連帶推薦的 'vue-property-decorator'，都沒有相應實現。翻了下前者的 issue，有一條掛了好些時間的待做 feature 就是 mixin 的支持。
也不是什么復雜的事，自己寫一個吧。
后注：vue-class-component 6.2.0 開始提供 mixins 方法，和本文的實現思路相似。
實現
import Vue, { VueConstructor } from 'vue'export type VClass<T> = { new(): T} & Pick<VueConstructor, keyof VueConstructor>/** * mixins for class style vue component */function Mixins<A>(c: VClass<A>): VClass<A>function Mixins<A, B>(c: VClass<A>, c1: VClass<B>): VClass<A&B>function Mixins<A, B, C>(c: VClass<A>, c1: VClass<B>, c2: VClass<C>): VClass<A&B&C>function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> { return c.extend({ mixins: traits })}聲明 VClass<T> 可作為 T 的類構造器。同時通過 Pick 拿到 Vue 的構造器上的靜態方法（extend/mixin 之類），如此才能夠支持下面這段中的真正實現，通過調用一個 Vue 的子類構造器上的 extend 方法生成新的子類構造器。
function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> { return c.extend({ mixins: traits })}至于 ABC 這個純粹是類型聲明的體力活了。
使用
實際使用時:
import { Component, Vue } from 'vue-property-decorator'import { Mixins } from '../../util/mixins'@Componentclass PageMixin extends Vue { title = 'Test Page' redirectTo(path: string) { console.log('calling reidrectTo', path) this.$router.push({ path }) }}interface IDisposable { dispose(...args: any[]): any}class DisposableMixin extends Vue { _disposables: IDisposable[] created() { console.log('disposable mixin created'); this._disposables = [] } beforeDestroy() { console.log('about to clear disposables') this._disposables.map((d) => { d.dispose() }) delete this._disposables } registerDisposable(d: IDisposable) { this._disposables.push(d) }}@Component({ template: ` <div> <h1>{{ title }}</h1> <p>Counted: {{ counter }}</p> </div> `})export default class TimerPage extends Mixins(PageMixin, DisposableMixin) { counter = 0 mounted() { const timer = setInterval(() => { if (this.counter++ >= 3) { return this.redirectTo('/otherpage') } console.log('count to', this.counter); }, 1000) this.registerDisposable({ dispose() { clearInterval(timer) } }) }}count to 1count to 2count to 3calling reidrectTo /otherpageabout to clear disposables注意到直接 extends Vue 的 DisposableMixin 并不是一個有效的 Vue 組件，也不可以直接在 mixins 選項里使用，如果要被以 Vue.extend 方式擴展的自定義組件使用，記住使用 Component 包裝一層。
const ExtendedComponent = Vue.extend({ name: 'ExtendedComponent', mixins: [Component(DisposableMixin)],})Abstract class
在業務系統中會使用到的 Mixin 其實多數情況下會更復雜，提供一些基礎功能，但有些部分需要留給繼承者自行實現，這個時候使用抽象類就很合適。
abstract class AbstractMusicPlayer extends Vue { abstract audioSrc: string playing = false togglePlay() { this.playing = !this.playing }}class MusicPlayerA extends AbstractMusicPlayer { audioSrc = '/audio-a.mp3'}class MusicPlayerB extends AbstractMusicPlayer { staticBase = '/statics' get audioSrc() { return `${this.staticBase}/audio-b.mp3` }}但抽象類是無法被實例化的，并不滿足 { new(): T } 這個要求，因此只能被繼承，而不能被混入，由于同樣的原因，抽象類也無法被 'vue-class-component' 的 Component 函數裝飾。
這時候只好將實現了的功能寫入 Mixin 中，待實現的功能放到接口里，讓具體類來實現。
interface IMusicSourceProvider { audioSrc: string}/** * @implements IPlayerImplementation */class PlayerMixin extends Vue { /** @abstract */ audioSrc: string logSrc() { console.log(this.audioSrc) }}interface IPlayerImplementation extends IMusicSourceProvider {}class RealPlayer extends Mixins(PlayerMixin) implements IPlayerImplementation { audioSrc = '/audio-c.mp3'}這種欺騙編譯器的方式其實還是比較拙劣的，如果一個具體類繼承了 PlayerMixin，卻沒有顯示聲明實現 IPlayerImplementation ，編譯器無法告訴你這個錯誤。我們只能在代碼里小心翼翼寫上注釋，期待使用者不要忘了這件事。
總結
以上所述是小編給大家介紹的在 Typescript 中使用可被復用的 Vue Mixin功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
