【Vue原理】Mixin - 白話版

CollinPeng 發(fā)布于2019-08-23 18:25 / 935人閱讀

摘要：而我覺得現(xiàn)在出一個(gè)白話版，是讓大家有興趣去研究源碼的時(shí)候，可以提前理清一下思路。相當(dāng)于封裝，提取公共部分。顯然，今天我不是來(lái)教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。而這個(gè)不會(huì)合并，直接替換掉整個(gè)選項(xiàng)

寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者拉到下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Mixin - 白話版

今天我們用白話文解讀 mixin 的工作原理，輕松快速理解 mixin 內(nèi)部工作原理。你說(shuō)，你只懂怎么用的，卻不懂他內(nèi)部是怎么工作的，這樣也不太行。

而我覺得現(xiàn)在出一個(gè) 白話版，是讓大家有興趣去研究源碼的時(shí)候，可以提前理清一下思路。暫時(shí)沒時(shí)間了解源碼的，也可以先了解下內(nèi)部流程，對(duì)解決一些奇奇怪怪的問題也是很有作用的

mixins 我覺得可能大家很少用把，但是這個(gè)東西真的非常有用。相當(dāng)于封裝，提取公共部分。

顯然，今天我不是來(lái)教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。如果不懂用的，請(qǐng)去官網(wǎng)看怎么用，兄弟

mixin不難，就是有點(diǎn)繞，今天我們探索兩個(gè)問題

1、什么時(shí)候合并

2、怎么合并

什么時(shí)候合并

什么是全局選項(xiàng)？就是全局組件，全局過(guò)濾器，全局指令，全局mixin

1、Vue.component 注冊(cè)的【全局組件】
2、Vue.filter 注冊(cè)的【全局過(guò)濾器】
3、Vue.directive 注冊(cè)的【全局指令】
4、Vue.mixin 注冊(cè)的【全局mixin】

也就是說(shuō)，你全局注冊(cè)的選項(xiàng)，其實(shí)會(huì)被傳遞引用到你的每個(gè)組件中，這樣，全局選項(xiàng) 和組件選項(xiàng) 就會(huì)合并起來(lái)，之后組件便能訪問到全局選項(xiàng)，然后你就可以在組件內(nèi)使用全局注冊(cè)的選項(xiàng)，比如使用全局過(guò)濾器

其實(shí)就是像你在自己的組件聲明 components 一樣，只是全局注冊(cè)的話，Vue 背后偷偷給你的每個(gè)組件都合并多一個(gè)全局選項(xiàng)的引用

但是為了保證全局選項(xiàng)不被污染，又不可能每個(gè)組件都深度克隆一份全局選項(xiàng)導(dǎo)致開銷過(guò)大，所以會(huì)根據(jù)不同的選項(xiàng)，做不同的處理。下面會(huì)詳細(xì)講解

怎么合并

權(quán)重

1、組件選項(xiàng)
2、組件 - mixin
3、組件 - mixin - mixin
4、.....省略無(wú)數(shù)可能存在的嵌套 mixin
x、全局選項(xiàng)

權(quán)重從 1 到最后依次減少

其實(shí)沒有權(quán)重這個(gè)東西，但是結(jié)果是一樣的，是我覺得這樣好理解，加上的一個(gè)概念

下面的講解，會(huì)使用四種選項(xiàng)代號(hào) 作為例子

mixin 里面嵌套mixin 太深很少見，而且也難以維護(hù)，所以就只嵌套一層為例

1、組件選項(xiàng)：代號(hào)為 A

2、組件-mixin：代號(hào)為 B

3、組件-mixin-mixin ：代號(hào)為 C

4、全局選項(xiàng) ：代號(hào)為 D

1、函數(shù)合并疊加

包括選項(xiàng)：data，provide

把兩個(gè)函數(shù)合并加到一個(gè)新函數(shù)中，并返回這個(gè)函數(shù)。在函數(shù)里面，會(huì)執(zhí)行那兩個(gè)方法。

按照這個(gè)流程，使用代號(hào)

1、D 和 C 合并成一個(gè)函數(shù) (CD)，函數(shù)執(zhí)行時(shí)，會(huì)執(zhí)行 C ，再執(zhí)行 D

2、(CD) 和 B 合并成一個(gè)函數(shù) (B(CD))，函數(shù)執(zhí)行時(shí)，會(huì)執(zhí)行 B ，再執(zhí)行 (CD)

3、(B(CD)) 和 A 合并成一個(gè)函數(shù)，函數(shù)執(zhí)行時(shí)，會(huì)執(zhí)行 B ，再執(zhí)行 (B(CD))

有點(diǎn)繞，簡(jiǎn)化執(zhí)行流程是： A->B->C->D

data 中數(shù)據(jù)有重復(fù)的，權(quán)重大的優(yōu)先，比如下面

var test_mixins={
    data(){        
        return {name:34}
    }
}

var a=new Vue({    
    mixins:[test_mixins],
    data(){        
        return {name:12}
    }
})

可以看到，mixin 和組件本身的 data 都有 name 這個(gè)數(shù)據(jù)，很顯然會(huì)以組件本身的為主，因?yàn)榻M件本身權(quán)重大

2、數(shù)組疊加

生命周期函數(shù)

權(quán)重越大的越放后面，會(huì)合并成一個(gè)數(shù)組，比如created

[ 
    全局 mixin - created，
    組件 mixin-mixin - created，
    組件 mixin - created，
    組件 options - created 
]

執(zhí)行流程是

生命周期，權(quán)重小的先執(zhí)行

watch
合并成一個(gè)下面這樣的數(shù)組，權(quán)重越大的越放后面

[ 
    全局 mixin - watch，
    組件 mixin-mixin - watch，
    組件 mixin - watch，
    組件 options - watch 
]

執(zhí)行流程是

監(jiān)聽回調(diào)，權(quán)重小的先執(zhí)行

3、原型疊加

包括選項(xiàng)：components，filters，directives

兩個(gè)對(duì)象合并的時(shí)候，不會(huì)相互覆蓋，而是權(quán)重小的被放到權(quán)重大的的原型上

這樣權(quán)重大的，訪問快些，因?yàn)樽饔糜蜴湺塘?/p>

A.__proto__ = B  
B.__proto__ = C  
C.__proto__ = D

兩個(gè)對(duì)象合并的時(shí)候，不會(huì)

以 filter 為例，下面是四種 filter 合并

// 全局 filter
Vue.filter("global_filter",function (params) {})

// mixin 的 mixin
var mixin_mixin={    
    filters:{
        mixin_mixin_filter(){}
    }
}

// mixin filter
var test_mixins={    
    filters:{
        mixin_filter(){}
    }
}

// 組件 filter
var a=new Vue({    
    mixins:[test_mixins],    
    filters:{
        self_filter(){}
    }
})

結(jié)果就系這樣..

4、覆蓋疊加

包括選項(xiàng)：props，methods，computed，inject

兩個(gè)對(duì)象合并，如果有重復(fù)key，權(quán)重大的覆蓋權(quán)重小的

比如

組件的 props：{ name:""}
組件mixin 的 props：{ name:"", age: "" }

那么把兩個(gè)對(duì)象合并，有相同屬性，以權(quán)重大的為主，組件的 name 會(huì)替換 mixin 的name

5、直接替換

這是默認(rèn)的處理方式，當(dāng)選項(xiàng)不屬于上面的處理方式的時(shí)候，就會(huì)像這樣處理，包含選項(xiàng)：el，template，propData 等

兩個(gè)數(shù)據(jù)只替換，不合并，權(quán)重大的，會(huì)一直替換權(quán)重小的，因?yàn)檫@些屬于只允許存在一個(gè)，所有只使用權(quán)重大的選項(xiàng)

組件設(shè)置 template，mixin 也設(shè)置 template，不用怕，組件的肯定優(yōu)先

這個(gè)好像跟覆蓋疊加很像，其實(shí)不一樣，覆蓋疊加會(huì)把兩個(gè)數(shù)據(jù)合并，重復(fù)的才覆蓋。而這個(gè)不會(huì)合并，直接替換掉整個(gè)選項(xiàng)

GPU云服務(wù)器云服務(wù)器 vue安卓版 Mixin 白話白話云計(jì)算

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105197.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CollinPeng

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

yolo

閱讀 1056·2023-04-25 17:51
一個(gè)中年程序員學(xué)習(xí)中國(guó)近代史的小結(jié)

閱讀 2863·2021-11-23 09:51
[11.11]ZJI雙十一追加香港阿里機(jī)型55折月付412元起

閱讀 1485·2021-11-08 13:21
主機(jī)端口怎么查-如何查電腦主機(jī)接口？

閱讀 2459·2021-09-22 15:14
css規(guī)范總結(jié)

閱讀 1526·2019-08-30 12:48
重拾css(9)——float

閱讀 1088·2019-08-29 12:44
js雙等號(hào)探索(一): [] == ![]為Ture ？

閱讀 1146·2019-08-26 12:21
JavaScript的六種基本數(shù)據(jù)類型

閱讀 1403·2019-08-26 10:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Mixin - 白話版

權(quán)重

1、函數(shù)合并疊加

2、數(shù)組疊加

3、原型疊加

4、覆蓋疊加

5、直接替換

相關(guān)文章

**【Vue原理】Mixins - 源碼版**

**【Vue原理】響應(yīng)式原理 - 白話版**

**【Vue原理】月老Computed - 白話版**

**【Vue原理】NextTick - 白話版**

**【Vue原理】Event - 白話版**

發(fā)表評(píng)論

0條評(píng)論

CollinPeng

男|高級(jí)講師

TA的文章

yolo

一個(gè)中年程序員學(xué)習(xí)中國(guó)近代史的小結(jié)

[11.11]ZJI雙十一追加香港阿里機(jī)型55折月付412元起

主機(jī)端口怎么查-如何查電腦主機(jī)接口？

css規(guī)范總結(jié)

重拾css(9)——float

js雙等號(hào)探索(一): [] == ![]為Ture ？

JavaScript的六種基本數(shù)據(jù)類型

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Mixin - 白話版

權(quán)重

1、函數(shù)合并疊加

2、數(shù)組疊加

3、原型疊加

4、覆蓋疊加

5、直接替換

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

1、函數(shù)合并疊加

2、數(shù)組疊加

4、覆蓋疊加

5、直接替換