VUE的mixin混入解析

常用場景：有兩個非常相似的元件，他們的基本功能是一樣的，但他們之間又存在著足夠的差異性，此時的你就像是來到了乙個分岔路口：我是把它拆分成兩個不同的元件呢？還是保留為乙個元件，然後通過props傳值來創造差異性從而進行區分呢？

兩種解決方案都不夠完美：如果拆分成兩個元件，你就不得不冒著一旦功能變動就要在兩個檔案中更新**的風險，這違背了 dry 原則。反之，太多的props傳值會很快變得混亂不堪，從而迫使維護者（即便這個人是你）在使用元件的時候必須理解一大段的上下文，拖慢寫碼速度。

使用mixin。vue 中的mixin對編寫函式式風格的**很有用，因為函式式程式設計就是通過減少移動的部分讓**更好理解（引自 michael feathers ）。mixin允許你封裝一塊在應用的其他元件中都可以使用的函式。如果使用姿勢得當，他們不會改變函式作用域外部的任何東西，因此哪怕執行多次，只要是同樣的輸入你總是能得到一樣的值，真的很強大！

混入 (mixin) 提供了一種非常靈活的方式，來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被「混合」進入該元件本身的選項。

//
定義乙個混入物件
var mymixin =,
methods: 
}}//定義乙個使用混入物件的元件
var component =vue.extend()
var component = new component() //
=> "hello from mixin!"

當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行「合併」。

1、比如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。

var mixin =
}}newvue(
},created: function () }})

可以看到 data 裡以元件裡的message優先順序更高。

2、同名鉤子函式將合併為乙個陣列，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。

var mixin =
}new
vue(
})//
=> "混入物件的鉤子被呼叫"
//=> "元件鉤子被呼叫"

可以看到 created 鉤子函式都被呼叫，並且 mixin 裡的 created 優先於元件裡的 created 之前呼叫。

3、值為物件的選項，例如methods、components和directives，將被合併為同乙個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。

var mixin =,
conflicting: function () 
}}var vm = new
vue(,
conflicting: function () 
}})vm.foo() 
//=> "foo"
vm.bar() //
=> "bar"
vm.conflicting() //
=> "from self"

注意：vue.extend()也使用同樣的策略進行合併。

混入也可以進行全域性註冊。使用時格外小心！一旦使用全域性混入，它將影響每乙個之後建立的 vue 例項。使用恰當時，這可以用來為自定義選項注入處理邏輯。

//
為自定義的選項 'myoption' 注入乙個處理器。
vue.mixin(
}})newvue()
//=> "hello!"

使用 vue.mixin 進行全域性註冊。

注意：請謹慎使用全域性混入，因為它會影響每個單獨建立的 vue 例項 (包括第三方元件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作為外掛程式發布，以避免重複應用混入。

自定義選項將使用預設策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合併，可以向vue.config.optionmergestrategies新增乙個函式：

vue.config.optionmergestrategies.myoption =function (toval, fromval)

對於多數值為物件的選項，可以使用與methods相同的合併策略：

var strategies =vue.config.optionmergestrategies
strategies.myoption = strategies.methods

可以在 vuex 1.x 的混入策略裡找到乙個更高階的例子：

const merge =vue.config.optionmergestrategies.computed
vue.config.optionmergestrategies.vuex =function (toval, fromval) 
}

很多同學可能看到這裡會有一些疑問，這不就跟vuex差不多嘛，其實不是的：

mixin混入物件和vuex的區別：

1、vuex是狀態共享管理，所以vuex中的所有變數和方法都是可以讀取和更改並相互影響的；

2、mixin可以定義公用的變數或方法，但是mixin中的資料是不共享的，也就是每個元件中的mixin例項都是不一樣的，都是單獨存在的個體，不存在相互影響的；

3、mixin混入物件值為函式的同名函式選項將會進行遞迴合併為陣列，兩個函式都會執行，只不過先執行mixin中的同名函式；

4、mixin混入物件值為物件的同名物件將會進行替換，都優先執行元件內的同名物件，也就是元件內的同名物件將mixin混入物件的同名物件進行覆蓋；

六、與父子元件的區別

子元件在引用之後相當於在父元件內開闢了一塊單獨的空間，來根據父元件props過來的值進行相應的操作，但本質上兩者還是涇渭分明，相對獨立。

而mixins則是在引入元件之後，將元件內部的內容如data等方法、method等屬性與父元件相應內容進行合併。相當於在引入後，父元件的各種屬性方法都被擴充了。

單純元件引用：父元件 + 子元件 >>> 父元件 + 子元件

mixins：父元件 + mixin元件 >>> new父元件

mixin作用：多個元件可以共享資料和方法，在使用mixin的元件中引入後，mixin中的方法和屬性也就併入到該元件中，可以直接使用。鉤子函式會兩個都被呼叫，mixin中的鉤子首先執行。

VUE的mixin混入解析

vue系列混入（mixin）

vue中mixin 混入的學習

Vue學習筆記之混入 mixin

VUE的mixin混入解析

vue系列 混入（mixin）

vue中mixin 混入 的學習

Vue學習筆記之混入 mixin

相關推薦

vue系列混入（mixin）

vue中mixin 混入的學習