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