以更好的方式使用 Vue Mixins

前端小智發表於2022-05-02
Vue
作者：knaagar
譯者：前端小智
來源：medium

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

Mixin 元件在專案中經常被用來重用一些業務邏輯，但它們有一些不確定的細微差別，這在專案開發中越來越明顯。我偶爾也會遇到這種情況，它們會給程式碼庫的重構或新功能的開發帶來困難。

在介紹我的方法之前，我想先介紹一下使用mixins的優點和缺點。

優點

  • 擴充套件了程式碼重用的DRY原則。我們可以在不同的元件中重複使用相同的業務邏輯。
  • 我們可以把 mixin 作為一個全域性性的 mixin，與所有的元件共享上下文。

缺點

  • 使用mixins的元件的邏輯不透明。
  • 可重寫的上下文，我們必須注意不要因為相同的名稱覆蓋一些Mixin的方法，getter或資料;

缺點並不是避免使用 mixins 的一個關鍵原因，但我們應該瞭解它們。建議使用基於這些技巧的方式來減少缺點所帶來的影響。

在 method、getter、value和 props 名字開頭使用字首。它展示了 mixin 相關的功能。使用這個技巧可以讓我們輕鬆地分離元件 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中使用字首。通常，這些方法和值的名稱是明確的，並且它們的功能不會在專案的其他部分重複，所以不需要為它們新增字首。

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

該方式的優點：

  • Mixins的方法或屬性可以方便地被IDE自動完成使用。
  • 使用字首可以避免元件的方法意外覆蓋mixin方法和屬性。
  • 大專案中的開發者對元件程式碼的透明和方便的閱讀。

總結

Mixin是一個有用的工具，但它會使我們的專案特別是在大專案中變得更加複雜、不靈活和不透明。使用這種方法是一種很好的實踐，可以更加明確mixin含義並避免一些由於不明確導致的bug。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://medium.com/@artem.hol...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章