【Vue原理】Mixin - 白話版

CollinPeng 發布于2019-08-23 18:25 / 937人閱讀

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

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

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

【Vue原理】Mixin - 白話版

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

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

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

顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。如果不懂用的，請去官網看怎么用，兄弟

mixin不難，就是有點繞，今天我們探索兩個問題

1、什么時候合并

2、怎么合并

什么時候合并

什么是全局選項？就是全局組件，全局過濾器，全局指令，全局mixin

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

也就是說，你全局注冊的選項，其實會被傳遞引用到你的每個組件中，這樣，全局選項和組件選項就會合并起來，之后組件便能訪問到全局選項，然后你就可以在組件內使用全局注冊的選項，比如使用全局過濾器

其實就是像你在自己的組件聲明 components 一樣，只是全局注冊的話，Vue 背后偷偷給你的每個組件都合并多一個全局選項的引用

但是為了保證全局選項不被污染，又不可能每個組件都深度克隆一份全局選項導致開銷過大，所以會根據不同的選項，做不同的處理。下面會詳細講解

怎么合并

權重

1、組件選項
2、組件 - mixin
3、組件 - mixin - mixin
4、.....省略無數可能存在的嵌套 mixin
x、全局選項

權重從 1 到最后依次減少

其實沒有權重這個東西，但是結果是一樣的，是我覺得這樣好理解，加上的一個概念

下面的講解，會使用四種選項代號作為例子

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

1、組件選項：代號為 A

2、組件-mixin：代號為 B

3、組件-mixin-mixin ：代號為 C

4、全局選項：代號為 D

1、函數合并疊加

包括選項：data，provide

把兩個函數合并加到一個新函數中，并返回這個函數。在函數里面，會執行那兩個方法。

按照這個流程，使用代號

1、D 和 C 合并成一個函數 (CD)，函數執行時，會執行 C ，再執行 D

2、(CD) 和 B 合并成一個函數 (B(CD))，函數執行時，會執行 B ，再執行 (CD)

3、(B(CD)) 和 A 合并成一個函數，函數執行時，會執行 B ，再執行 (B(CD))

有點繞，簡化執行流程是： A->B->C->D

data 中數據有重復的，權重大的優先，比如下面

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

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

可以看到，mixin 和組件本身的 data 都有 name 這個數據，很顯然會以組件本身的為主，因為組件本身權重大

2、數組疊加

生命周期函數

權重越大的越放后面，會合并成一個數組，比如created

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

執行流程是

生命周期，權重小的先執行

watch
合并成一個下面這樣的數組，權重越大的越放后面

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

執行流程是

監聽回調，權重小的先執行

3、原型疊加

包括選項：components，filters，directives

兩個對象合并的時候，不會相互覆蓋，而是權重小的被放到權重大的的原型上

這樣權重大的，訪問快些，因為作用域鏈短了

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

兩個對象合并的時候，不會

以 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(){}
    }
})

結果就系這樣..

4、覆蓋疊加

包括選項：props，methods，computed，inject

兩個對象合并，如果有重復key，權重大的覆蓋權重小的

比如

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

那么把兩個對象合并，有相同屬性，以權重大的為主，組件的 name 會替換 mixin 的name

5、直接替換

這是默認的處理方式，當選項不屬于上面的處理方式的時候，就會像這樣處理，包含選項：el，template，propData 等

兩個數據只替換，不合并，權重大的，會一直替換權重小的，因為這些屬于只允許存在一個，所有只使用權重大的選項

組件設置 template，mixin 也設置 template，不用怕，組件的肯定優先

這個好像跟覆蓋疊加很像，其實不一樣，覆蓋疊加會把兩個數據合并，重復的才覆蓋。而這個不會合并，直接替換掉整個選項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105197.html

【Vue原理】Mixins - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Mixins - 源碼版今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理篇幅會有些長，...

gotham 2019-08-23 18:32 評論0 收藏0
【Vue原理】響應式原理 - 白話版

摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 V...

gggggggbong 2019-08-23 18:21 評論0 收藏0
【Vue原理】月老Computed - 白話版

摘要：如果沒有緩存，我們將不可避免的多次執行的現在我們要開始講解，是如何判斷是否使用緩存的首先計算后，會把計算得到的值保存到一個變量中。當使用緩存時，就直接返回這個變量。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或...

Tony_Zby 2019-08-23 18:21 評論0 收藏0
【Vue原理】NextTick - 白話版

摘要：通常會做很多判斷來選擇存在的類型，比如判斷等是否存在，而選擇他為微任務類型但是可能宏微任務最后都是，因為他是保守兼容處理。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【V...

zeyu 2019-08-26 18:36 評論0 收藏0
【Vue原理】Event - 白話版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版事件是我最感興趣的東西之寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

kumfo 2019-08-23 18:35 評論0 收藏0