Mixin 組件在項(xiàng)目中經(jīng)常被用來(lái)重用一些業(yè)務(wù)邏輯，但它們有一些不確定的細(xì)微差別，這在項(xiàng)目開(kāi)發(fā)中越來(lái)越明顯。我偶爾也會(huì)遇到這種情況，它們會(huì)給代碼庫(kù)的重構(gòu)或新功能的開(kāi)發(fā)帶來(lái)困難。

在介紹我的方法之前，我想先介紹一下使用mixins的優(yōu)點(diǎn)和缺點(diǎn)。

優(yōu)點(diǎn)

• 擴(kuò)展了代碼重用的DRY原則。我們可以在不同的組件中重復(fù)使用相同的業(yè)務(wù)邏輯。
• 我們可以把 mixin 作為一個(gè)全局性的 mixin，與所有的組件共享上下文。

缺點(diǎn)

• 使用mixins的組件的邏輯不透明。
• 可重寫(xiě)的上下文，我們必須注意不要因?yàn)橄嗤拿Q覆蓋一些Mixin的方法，getter或數(shù)據(jù);

缺點(diǎn)并不是避免使用 mixins 的一個(gè)關(guān)鍵原因，但我們應(yīng)該了解它們。建議使用基于這些技巧的方式來(lái)減少缺點(diǎn)所帶來(lái)的影響。

在 method、getter、value和 props 名字開(kāi)頭使用前綴。它展示了 mixin 相關(guān)的功能。使用這個(gè)技巧可以讓我們輕松地分離組件 props 和 mixin props。例如：$<mixinName>_<(prop|method|value)>。

export default {
  props: {
    $impressionsMixin_page: {
      type: Number,
      required: true
    },
    $impressionsMixin_listingId: {
      type: Number,
      required: true
    },
    $impressionsMixin_itemId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      $impressionsMixin_observer: null,
      $impressionsMixin_timeout: null,
      $impressionsMixin_eventObject: null
    };
  },
  methods: {
    $impressionsMixin_getObserverOptions() {
      // ...
    },
    $impressionsMixin_setImpressionObserver() {
      // ...
    },
    $impressionsMixin_resetImpressionObserver() {
      // ...
    },
    $impressionsMixin_logImpression() {
      // ...
    }
  }
};

在父組件中這樣使用：

<template>
  <div id="app">
    <ListingItem
      v-for="item in items"
      :key="item.id"
      :item="item"
      textAlign="left"
      :$impressionsMixin_page="page"
      :$impressionsMixin_itemId="item.id"
      :$impressionsMixin_listingId="listingId"
    />
  </div>
</template>

我不喜歡在全局mixin中使用前綴。通常，這些方法和值的名稱是明確的，并且它們的功能不會(huì)在項(xiàng)目的其他部分重復(fù)，所以不需要為它們添加前綴。

export default {
  config() {
    // ...
  },
  user() {
    // ...
  },
  isMobile() {
    // ...
  },
  isTablet() {
    // ...
  },
  isDesktop() {
    // ...
  }
};

該方式的優(yōu)點(diǎn)：

• Mixins的方法或?qū)傩钥梢苑奖愕乇籌DE自動(dòng)完成使用。
• 使用前綴可以避免組件的方法意外覆蓋mixin方法和屬性。
• 大項(xiàng)目中的開(kāi)發(fā)者對(duì)組件代碼的透明和方便的閱讀。

總結(jié)

Mixin是一個(gè)有用的工具，但它會(huì)使我們的項(xiàng)目特別是在大項(xiàng)目中變得更加復(fù)雜、不靈活和不透明。使用這種方法是一種很好的實(shí)踐，可以更加明確mixin含義并避免一些由于不明確導(dǎo)致的bug。

作者：knaagar 譯者：前端小智

來(lái)源：medium 原文：https://medium.com/@artem.holinka/use-vue-js-mixins-in-a-better-way-11e4ff774763。