令人頭疼的 mixin

眾所周知，vue 的 mixins 是個非常靈活，但又很容易帶來混亂的 API。不知道你是否像我一樣，常常因為項目中用了 mixins 而感到頭疼。比如說：

• 來回切換文件：有人會因為文件太大而把一部分內(nèi)容提取到單獨的 mixin 中，看起來文件變小了，但改代碼的時候需要在多個文件之間不停切換
• 找不到函數(shù)和變量：模板中用到一個函數(shù)，在 methods 中搜索不到，然后發(fā)現(xiàn)組件引入了很多 mixins，不知道要該去哪里找

Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(hù)。所以，在 Vue3 中，不再推薦使用 mixins，而是改用組合式 API的方式來重用代碼。

那么，我們是不是不應(yīng)該在日常代碼中使用 mixins 呢？我覺得也不是。Mixins 是個強(qiáng)大的工具，但本身存在一些嚴(yán)重的問題，如果我們能把 mixins 中存在的問題解決掉，那剩下的就會是：強(qiáng)大。

為什么會這樣？

面對 mixins 這樣靈活的工具，我們必須理解它的問題所在，才能避免在使用時帶來混亂。

本質(zhì)上，mixins 是一種重用代碼的手段，它可以向一個對象中注入另一個對象中的所有屬性。并且，一個對象可以同時從多個不同對象中注入屬性，所以非常靈活。而這樣的靈活導(dǎo)致了一些致命的問題：

• 來源不明：使用的 mixins 越多，越難找到某個屬性或方法來自哪里
• 無法精確引入：引入一個 mixin 時，會引入這個 mixin 的全部屬性，因此很可能會引入一些用不到的東西，也會導(dǎo)致很難清楚知道到底引入了哪些屬性和方法
• 命名沖突：引入多個 mixins 時，引入的屬性名可能會沖突
• 耦合問題：不規(guī)范地使用 mixins 功能，可能會導(dǎo)致耦合問題，比如因為組件太大而抽離一部分屬性到 mixins 中，這樣產(chǎn)生的 mixins 一般會互相依賴，造成強(qiáng)耦合

作為對比，我們看看其他類似技術(shù)為什么沒有這些問題：

• ES模塊：一個模塊可以導(dǎo)出很多東西，但我們可以選擇性導(dǎo)入，這樣就能清楚知道導(dǎo)入了哪些內(nèi)容，并且導(dǎo)入的變量和函數(shù)可以重命名，這樣就解決了命名沖突的問題
• Vue3組合式函數(shù)：Vue3 推薦使用組合式函數(shù)來替代 mixins 實現(xiàn)邏輯重用，組合式函數(shù)一般返回一個對象，解構(gòu)時可以只取出對象中的部分屬性，從而可以精確控制引入內(nèi)容，并且解構(gòu)語法支持自定義變量名，因此不會導(dǎo)致命名沖突

如果我們想要放心使用 mixins 功能，就必須解決以上問題。從 ES模塊 和 Vue3組合式函數(shù) 的設(shè)計，我們可以看出一些關(guān)鍵點，那就是需要能 精確控制引入的內(nèi)容，具體包括：

• 清晰看到引入的內(nèi)容：在引入 mixins 的地方，可以直接看到引入了哪些屬性和方法
• 支持部分引入：可以只引入需要用到的屬性，而不是引入 mixin 對象上的全部屬性
• 自定義引入的屬性名：可以指定要引入的屬性和方法的名字，避免命名沖突

這看起來似乎是不可能的，因為 mixin 就是一個對象，一旦引入就要接受這個對象上的所有屬性和方法，也不可能在引入的時候去修改對象的屬性名。

那還能不能用？

當(dāng)然，你可以只使用生命周期鉤子的功能，而不引入 data、計算屬性和方法，這樣就不會往實例上添加額外屬性，也就不會有這些問題。但是，這會使 mixins 的功能大打折扣。

幸運(yùn)的是，確實有一個方法能夠精確控制引入的內(nèi)容，那就是動態(tài)創(chuàng)建 mixin 對象。

一般來說，我們習(xí)慣把 mixin 定義為一個對象，然后在組件中直接引入。但其實只要把它定義成一個函數(shù)，問題就會得到解決。

我們可以把 mixin 定義成一個函數(shù)，通過函數(shù)參數(shù)接收需要引入的屬性名，然后生成并返回真正的 mixin 對象。這樣的 mixin 就是動態(tài)生成的。引入時，調(diào)用這個函數(shù)，通過傳入的參數(shù)就可以精確控制引入的內(nèi)容，可以指定要引入哪些屬性，也可以指定引入的屬性名字。

import mouse from '@/mixins/mouse'
export default {
  mixins: [
    mouse({
      mouseX: 'x',
      mouseY: 'y'
    })
  ]
}

我們給這種方法取一個不沖突的名字，就稱為 動態(tài)Mixin 好了。

當(dāng)然，這種寫法增加了編寫 mixins 的難度，所以我認(rèn)為，mixins 適合用來引入一些簡單的屬性。比如，VueUse 中的那些工具方法就很適合使用動態(tài) Mixin 來實現(xiàn)。

動態(tài)Mixin示例

接下來我列舉一些自己在項目中經(jīng)常使用的 mixins，大家可以體會一下這種動態(tài) Mixin 的適用場景以及帶來的好處。

倒計時

倒計時是業(yè)務(wù)中經(jīng)常會用到的一種場景，比如發(fā)送驗證碼時一般會顯示倒計時。然后有些使用須知的彈窗，確認(rèn)按鈕也會在倒計時結(jié)束后才允許點擊。

這種倒計時非常簡單，只需要一個記錄當(dāng)前剩余時間的屬性，加上一個設(shè)置倒計時時長的函數(shù)。這種場景就非常適合使用 mixins 來實現(xiàn)。實現(xiàn)過程先不考慮，使用效果是這樣的：

<template>
  <button :disabled="!!seconds" @click="setCountdown(60)">
    {{ seconds || '發(fā)送驗證碼' }}
  </button>
</template>
<script>
import countdown from '@/mixins/countdown';
export default {
  // 引入 seconds 屬性存儲剩余秒數(shù)
  // 引入 setCountdown 方法設(shè)置倒計時秒數(shù)
  mixins: [countdown('seconds', 'setCountdown')],
};
</script>

這個 mixins 引入了一個屬性和一個方法，引入的內(nèi)容都是可以指定名字的。調(diào)用 setCountdown 方法時會設(shè)置 seconds 屬性的值，并重新開始倒計時。

不過在 Vue 中，我們可以充分利用 Vue 自帶的響應(yīng)式特性。我們可以利用 watch 去進(jìn)行監(jiān)聽，在檢測到 seconds 變化時，重新開始倒計時。這樣就可以少引入一個方法。

<template>
  <button :disabled="!!seconds" @click="seconds = 60">
    {{ seconds || '發(fā)送驗證碼' }}
  </button>
</template>
<script>
import countdown from '@/mixins/countdown';
export default {
  // 引入 seconds 屬性記錄倒計時秒數(shù)
  mixins: [countdown('seconds')],
};
</script>

看，使用 mixins 之后，代碼變得特別簡潔清晰。而且只需要寫一次，今后就可以在其他項目中直接使用這個 mixin。而如果不使用 mixins 自己實現(xiàn)，就需要多寫很多代碼，完善的寫法每次還需要考慮怎么清除定時器，防止內(nèi)存泄漏。

這個 mixin 的具體實現(xiàn)可以看這里：vue-library/mixins/countdown at master · web1706/vue-library · GitHub。你可以直接在你的項目中使用。

路由query參數(shù)

編寫一個操作路由 query 參數(shù)的 mixin 其實是挺有必要的。

想象這樣一個場景：頁面上有一個 Tabs 組件，有多個頁簽。當(dāng)我們切換頁簽時，一般會把當(dāng)前激活的頁簽的值存儲在 data 中。

export default {
  data() {
    return {
      // 當(dāng)前 tab 頁
      currentTab: 'one'
    }
  }
}

這樣其實會有一個問題，就是刷新頁面后，或者進(jìn)入其他頁面再返回時，是回不到之前的頁簽的。如果有一天需要改成刷新時保留激活的頁簽，最好的方法就是把頁簽值存入路由 query 中。這時如果有這樣一個操作 query 參數(shù)的 mixin 就方便了。

import routeQuery from '@/mixins/route-query';
export default {
  mixins: [
    // 當(dāng)前 tab 頁
    routeQuery('currentTab'),
  ],
};

這個 mixin 會從 this.$route.query 中讀取對應(yīng)的參數(shù)值，放到名為 currentTab 的屬性中。并且這個屬性是可寫的！寫入時會自動調(diào)用 this.$router.replace 去替換 query 中的參數(shù)值。

當(dāng)然，你可能還需要指定默認(rèn)值，這也沒問題，只需要改成對象形式：

import routeQuery from '@/mixins/route-query';
export default {
  mixins: [
    routeQuery({
      // 當(dāng)前 tab 頁
      currentTab: {
        default: 'one'
      }
    }),
  ],
};

或許，你想在 query 中使用一個不一樣的參數(shù)名。

import routeQuery from '@/mixins/route-query';
export default {
  mixins: [
    routeQuery({
      // 當(dāng)前 tab 頁
      currentTab: {
        from: 'tab'
      },
      // 簡寫形式
      activeTab: 'tab'
    }),
  ],
};

想要使用數(shù)字類型也沒問題。

export default {
  mixins: [
    routeQuery({
      // 對引入的屬性值進(jìn)行轉(zhuǎn)換
      companyId: {
        type: Number,
      },
      // 簡寫形式
      deptId: Number,
    }),
  ],
};

可以看到，這個 mixin 非常靈活，功能也比傳統(tǒng) mixins 強(qiáng)大很多。

后記

本文介紹的這種使用函數(shù)動態(tài)生成 Mixin 的方式，大家覺得怎么樣呢？大家平時又是如何看待和使用 Mixin 的呢？快來交流一下各自的想法吧。

以上就是Vue中Mixin的正確用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue Mixin用法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論