Vue進(jìn)階（幺陸幺）：mixins學(xué)習(xí)

前言

在開發(fā)前端項目的時候，經(jīng)常會遇到這樣一種開發(fā)場景：多個模板頁中應(yīng)用的組件或者頁面布局非常相似，比如較為熟悉的el-dialog、el-tooltip和el-table等及頁面布局。這時候就會考慮：是把它們拆分成多個不同的組件呢？還是只使用一個組件，創(chuàng)建足夠的屬性來改變不同的情況。

這些解決方案都不夠完美。如果拆分成多個組件，就不得不冒著如果功能變動你要在多個文件中更新它的風(fēng)險。另一方面，太多的組件會很快變得混亂，難維護(hù)，甚至對于組件開發(fā)者自已而言，也是件難事。

在Vue中，對于這樣的場景，官方提供了一種叫混入（mixins）的特性。使用mixins允許你封裝一塊在應(yīng)用的其他組件中都可以使用的函數(shù)。如果被正確的使用，他們不會改變函數(shù)作用域外部的任何東西，所以多次執(zhí)行，只要是同樣的輸入，總是能得到一樣的值。

既然Vue的mixins這么優(yōu)秀，那應(yīng)該怎么使用呢？

什么是mixins

Vue的官方文檔是這樣描述mixins的：

mixins是一種分發(fā)Vue組件中可復(fù)用功能的一種靈活方式。混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

mixins是一個JavaScript對象，可以包含組件中的任意選項，比如Vue實例中生命周期的各個鉤子函數(shù)，也可以是data、components、methods或directives等。在Vue中，mixins為我們提供了在Vue組件中共用功能的方法。使用方式很簡單，將共用的功能以對象的方式傳入mixins選項中。當(dāng)組件使用mixins對象時，所有mixins對象的選項都將被混入該組件本身的選項。

如何應(yīng)用mixins

示例代碼如下：

1.首先定義一個混入對象

2.然后，把混入對象混入到當(dāng)前的組件中

mixins的特點

方法和參數(shù)在各組件中不共享

如混入對象中有一個 cont:1的變量,在組件A中改變cont值為5，這時候在組件B中獲取這個值，拿到的還是1，還是混入對象里的初始值，數(shù)據(jù)不共享。示例如下：

值為參數(shù)的選項

混合對象中的參數(shù)num

組件1中的參數(shù)num進(jìn)行+1的操作

組件2中的參數(shù)num未進(jìn)行操作

查看兩組件中分別輸出的num值

可以看到，在組件1里改變了num里面的值，組件2中的num值還是混入對象里的初始值。

值為對象的選項

如methods,components等，選項會被合并，鍵沖突的組件會覆蓋混入對象的方法。比如混入對象里有個方法A，組件里也有方法A，這時候在組件里調(diào)用的話，執(zhí)行的是組件里的A方法。

混入對象中的方法

組件中的方法

打印臺的輸出

值為函數(shù)的選項

如created,mounted等，就會被合并調(diào)用，混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用，同一個鉤子函數(shù)里，會先執(zhí)行混入對象的東西，再執(zhí)行本組件的。

混入對象函數(shù)中的console

組件函數(shù)中的console

打印臺的打印

與vuex的區(qū)別

vuex：用來做狀態(tài)管理，可以看做全局變量，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。

mixins：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響。

與公共組件的區(qū)別

組件：在父組件中引入組件，相當(dāng)于在父組件中給出一片獨立的空間供子組件使用，然后根據(jù)props來傳值，但本質(zhì)上兩者是相對獨立的:父組件 + 子組件 -> 父組件 + 子組件。

mixins：是在引入組件之后與組件中的對象和方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件的對象與方法，可以理解為形成了一個新的組件:父組件 + 子組件 -> new父組件，有點像注冊了一個vue的公共方法，可以綁定在多個組件或者多個Vue對象實例中使用。另一點，類似于在原型對象中注冊方法，實例對象即組件或者Vue實例對象中，仍然可以定義相同函數(shù)名的方法進(jìn)行覆蓋，有點像子類和父類的感覺。

mixins異步請求處理

在mixins里面包含異步請求函數(shù)的時候，我們需要在組件中使用異步請求函數(shù)的返回值應(yīng)用場景下，直接應(yīng)用混入?yún)?shù)時會取不到此返回值，示例如下：

mixin中

組件中

控制臺

解決方案：不要直接應(yīng)用返回結(jié)果而是通過直接調(diào)用異步函數(shù)解決。

mixin中

組件中

控制臺

Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。