国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue原理】Mixin - 白話版

CollinPeng / 927人閱讀

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

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

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

【Vue原理】Mixin - 白話版

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

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

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

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

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

1、什么時候合并

2、怎么合并




什么時候合并

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

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

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

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

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




怎么合并
權(quán)重

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

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

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

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

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

1、組件選項：代號為 A

2、組件-mixin：代號為 B

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

4、全局選項 ：代號為 D




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

包括選項：data，provide

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

按照這個流程，使用代號

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

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

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

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

data 中數(shù)據(jù)有重復的，權(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 這個數(shù)據(jù)，很顯然會以組件本身的為主，因為組件本身權(quán)重大




2、數(shù)組疊加

生命周期函數(shù)

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

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

執(zhí)行流程是

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

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

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

執(zhí)行流程是

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




3、原型疊加

包括選項：components，filters，directives

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

這樣權(quán)重大的，訪問快些，因為作用域鏈短了

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

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




4、覆蓋疊加

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

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

比如

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

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




5、直接替換

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105197.html

相關(guān)文章

  • 【Vue原理】Mixins - 源碼版

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

    gotham 評論0 收藏0

  • 【Vue原理】響應式原理 - 白話版

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

    gggggggbong 評論0 收藏0

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

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

    Tony_Zby 評論0 收藏0

  • 【Vue原理】NextTick - 白話版

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

    zeyu 評論0 收藏0

  • 【Vue原理】Event - 白話版

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

    kumfo 評論0 收藏0

發(fā)表評論

0條評論

CollinPeng

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<