在Vue.js中使用Mixin
有一種很常見的情況：有兩個非常相似的組件，他們的基本功能是一樣的，但他們之間又存在著足夠的差異性，此時的你就像是來到了一個分岔路口：我是把它拆分成兩個不同的組件呢?還是保留為一個組件，然后通過props傳值來創(chuàng)造差異性從而進行區(qū)分呢?
兩種解決方案都不夠***：如果拆分成兩個組件，你就不得不冒著一旦功能變動就要在兩個文件中更新代碼的風險，這違背了 DRY 原則。反之，太多的props傳值會很快變得混亂不堪，從而迫使維護者(即便這個人是你)在使用組件的時候必須理解一大段的上下文，拖慢寫碼速度。
使用Mixin。Vue 中的Mixin對編寫函數(shù)式風格的代碼很有用，因為函數(shù)式編程就是通過減少移動的部分讓代碼更好理解(引自 Michael Feathers )。Mixin允許你封裝一塊在應用的其他組件中都可以使用的函數(shù)。如果使用姿勢得當，他們不會改變函數(shù)作用域外部的任何東西，因此哪怕執(zhí)行多次，只要是同樣的輸入你總是能得到一樣的值，真的很強大!
基礎實例
我們有一對不同的組件，它們的作用是通過切換狀態(tài)(Boolean類型)來展示或者隱藏模態(tài)框或提示框。這些提示框和模態(tài)框除了功能相似以外，沒有其他共同點：它們看起來不一樣，用法不一樣，但是邏輯一樣。
- // 模態(tài)框
- const Modal = {
- template: '#modal',
- data() {
- return {
- isShowing: false
- }
- },
- methods: {
- toggleShow() {
- this.isShowing = !this.isShowing;
- }
- },
- components: {
- appChild: Child
- }
- }
- // 提示框
- const Tooltip = {
- template: '#tooltip',
- data() {
- return {
- isShowing: false
- }
- },
- methods: {
- toggleShow() {
- this.isShowing = !this.isShowing;
- }
- },
- components: {
- appChild: Child
- }
- }
我們可以在這里提取邏輯并創(chuàng)建可以被重用的項：
- const toggle = {
- data() {
- return {
- isShowing: false
- }
- },
- methods: {
- toggleShow() {
- this.isShowing = !this.isShowing;
- }
- }
- }
- const Modal = {
- template: '#modal',
- mixins: [toggle],
- components: {
- appChild: Child
- }
- };
- const Tooltip = {
- template: '#tooltip',
- mixins: [toggle],
- components: {
- appChild: Child
- }
- };
你可以點擊這里，查看 Sarah Drasner(@sdras) 在CodePen上編寫 Mixin 的例子
為了更容易理解Mixin，這個例子故意編寫得簡單一些。真實應用中Mixin有如下的應用，但是它的作用也不僅限于此：獲取視窗和組件的尺寸，采集特定的鼠標事件和圖表的基本元素。Paul Pflugradt 有一個關于 Vue Mixins 的優(yōu)秀項目，值得一提的是它是用 coffeescript 編寫的。
用法
上面這個codepen的例子并沒有告訴我們在一個真實的應用中如何使用Mixin，所以我們看看下面的這個。
你可以按照你喜歡的任意方式設置你的目錄結構，但為了結構規(guī)整我喜歡新建一個mixin目錄。我們創(chuàng)建的這個文件含有.js擴展名(跟.vue相對，就像我們的其他文件)，為了使用Mixin我們需要輸出一個對象。
接著我們可以在Modal.vue使用這樣的寫法，來引入這個Mixin:
- import Child from './Child'
- import { toggle } from './mixins/toggle'
- export default {
- name: 'modal',
- mixins: [toggle],
- components: {
- appChild: Child
- }
- }
即便我們使用的是一個對象而不是一個組件，生命周期函數(shù)對我們來說仍然是可用的，理解這點很重要。我們也可以這里使用mounted()鉤子函數(shù)，它將被應用于組件的生命周期上。這種工作方式真的很靈活也很強大。
合并
在下面的這個例子，我們可以看到，我們不僅僅是實現(xiàn)了自己想要的功能，并且Mixin中的生命周期的鉤子也同樣是可用的。因此，當我們在組件上應用Mixin的時候，有可能組件與Mixin中都定義了相同的生命周期鉤子，這時候鉤子的執(zhí)行順序的問題凸顯了出來。默認Mixin上會首先被注冊，組件上的接著注冊，這樣我們就可以在組件中按需要重寫Mixin中的語句。組件擁有最終發(fā)言權。當發(fā)生沖突并且這個組件就不得不“決定”哪個勝出的時候，這一點就顯得特別重要，否則，所有的東西都被放在一個數(shù)組當中執(zhí)行，Mixin將要被先推入數(shù)組，其次才是組件。
- //mixin
- const hi = {
- mounted() {
- console.log('hello from mixin!')
- }
- }
- //vue instance or component
- new Vue({
- el: '#app',
- mixins: [hi],
- mounted() {
- console.log('hello from Vue instance!')
- }
- });
- //Output in console
- > hello from mixin!
- > hello from Vue instance!
如果這兩個沖突了，我們看看 Vue實例或組件是如何決定輸贏的：
- //mixin
- const hi = {
- methods: {
- sayHello: function() {
- console.log('hello from mixin!')
- }
- },
- mounted() {
- this.sayHello()
- }
- }
- //vue instance or component
- new Vue({
- el: '#app',
- mixins: [hi],
- methods: {
- sayHello: function() {
- console.log('hello from Vue instance!')
- }
- },
- mounted() {
- this.sayHello()
- }
- })
- // Output in console
- > hello from Vue instance!
- > hello from Vue instance!
你可能已經注意到這有兩個console.log而不是一個——這是因為***個函數(shù)被調用時，沒有被銷毀，它只是被重寫了。我們在這里調用了兩次sayHello()函數(shù)。
全局Mixin
當我們使用“全局”來描述Mixin的時候，我們并不是說Mixin能夠像filter，在每個組件都能被訪問到。只是我們能夠在組件通過mixins:[toggle]訪問組件上的Mixin對象。
全局Mixin被注冊到了每個單一組件上。因此，它們的使用場景極其有限并且在使用的時候我們需要非常小心。一個我能想到的用途就是類似于插件，你需要賦予它訪問所有東西的權限。但即使在這種情況下，我也對你正在做事情的充滿警惕，尤其當你打算為應用增加通能的時候，這樣做可能對你來說是個潘多拉的盒子。
為了創(chuàng)建一個全局實例，我們可以把它放在Vue實例之上。在一個典型的 Vue-cli 初始化的項目中，它可能在你的main.js文件中。
- Vue.mixin({
- mounted() {
- console.log('hello from mixin!')
- }
- })
- new Vue({
- ...
- })
再次提醒，小心使用它!那個console.log將會出現(xiàn)在每個組件上，在這個案例里還不算壞(除了控制臺上有多余的輸出)。但如果全局Mixin被錯誤的使用，你將能看到它有多可怕。
結論
Mixin對于封裝一小段想要復用的代碼來講是有用的。對你來說Mixin當然不是唯一可行的選擇：比如說高階組件就允許你組合相似函數(shù)，Mixin只是的一種實現(xiàn)方式。我喜歡Mixin，因為我不需要傳遞狀態(tài)，但是這種模式當然也可能會被濫用，所以，仔細思考下哪種選擇對你的應用最有意義吧!
