【Vue原理】Methods - 源碼版

luoyibu 發(fā)布于2019-08-23 18:22 / 483人閱讀

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

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

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

【Vue原理】Methods - 源碼版

今天我們解讀 methods 的源碼，其實 methods 挺簡單的，所以就不打算出白話版了，但是 methods 里面讓我重新認識到這一個重要的知識點，是我是我，可能你們已經掌握了哈哈

methods 怎么使用實例訪問？

methods 簡單到什么程度呢，估計你用腳都能想得到

那么現(xiàn)在的問題怎么解答

"遍歷 methods 這個對象，然后逐個復制到實例上？"

沒錯，你猜對了，的確是逐個復制，簡化源碼是這么寫的

function initMethods(vm, methods) {    
    for (var key in methods) {
        vm[key] = 
            methods[key] == null ? 
            noop : 
            bind(methods[key], vm);
    }
}

methods 如何固定作用域的

其實 methods 的固定作用域的唯一重點就是 bind 了，bind 相信大家也都用過

bind 是固定函數(shù)作用域的，說實在的，之前我還真不太用 bind 這個東西，就知道可以綁定作用域，我覺得我會 call 和 apply 就行了，現(xiàn)在后悔了，發(fā)現(xiàn)用處太大了

調用 bind 會返回綁定作用域的函數(shù)，而這個函數(shù)直接執(zhí)行時，作用域就已經是固定了的

不像 call 和 apply 這種一次性綁定作用域的妖艷賤貨不同，這個貨一次綁定，終身受益啊

Vue 使用了 bind 去綁定 methods 方法，顯然是為了避免有些刁民會錯誤調用而報錯，索性直接固定作用域，而且考慮到 bind 有的瀏覽器不支持

于是寫了一個兼容方法，意思大概是這樣

1、bind 函數(shù)需要傳入作用域 context 和函數(shù) A

2、然后閉包保存這個 context，返回一個新函數(shù) B

3、B 執(zhí)行的時候，使用 call 方法直接綁定函數(shù)A 的作用域為閉包保存的 context

下面是 Vue bind 兼容的源碼，我建議大家把這個方法保存下來，尤大的東西，還不瞬間保存？？

function polyfillBind(fn, ctx) {    
    function boundFn(a) {        
        var l = arguments.length;        
        return l ?
            (
                l > 1 ?
                fn.apply(ctx, arguments) :
                fn.call(ctx, a)
            ):
            fn.call(ctx)
    }
    boundFn._length = fn.length;    
    return boundFn
}

function nativeBind(fn, ctx) {    
    return fn.bind(ctx)

}

var bind = Function.prototype.bind ?
    nativeBind :
    polyfillBind;

Vue 使用 bind 之后，對我們有什么好處？

我們調用實例的方法，不再每次都使用實例去調用了

這樣子，有什么好處呢，當多次調用方法的話，使用局部變量保存之后，直接訪問局部變量可以減少作用域鏈的檢索

methods:{
    test(){},
    getName(){        

        // 本來是這樣，多次使用實例調用
        this.test() 
        this.test()    
       
        // 現(xiàn)在局部變量保存，這是優(yōu)化點
        var test = this.test
        test()
        test()
    }
}

bind 綁定作用域強到無法改變

舉栗子

function a(){    
    console.log(this)
}

var b={ name:1 }
var c = a.bind(b)
var d={
    c:c,    
    woqu:3434333
}
c()
d.c()

c 和 d.c 執(zhí)行打印下面的結果

盡管使用 d 調用，作用域仍然是 b，簡直不要太強啊

講到這里，methods 的精髓，就是 bind 了，很有用哦，這個東西，大家務必要記住

總結

1、methods 會逐個復制到實例上

2、methods 方法會使用 bind 綁定實例作用域，確保作用域不被修改

GPU云服務器云服務器 vue源碼 vue webrtc 源碼 vue安卓版 methods

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/105113.html

【Vue原理】Event - 源碼版之綁定組件自定義事件

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

amuqiao 2019-08-23 18:36 評論0 收藏0
【Vue原理】Mixins - 源碼版

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

gotham 2019-08-23 18:32 評論0 收藏0
【Vue原理】代理 Data - 源碼版

摘要：最后完全不會影響不影響依賴更新賦值，觸發(fā)代理設置的，就會直接賦值給總部，從而觸發(fā)設置的，這個，用來依賴更新。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】代理 D...

ralap 2019-08-23 18:25 評論0 收藏0
【Vue原理】Props - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Props - 源碼版今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。幸好我做...

light 2019-08-23 18:32 評論0 收藏0
【Vue原理】Mixin - 白話版

摘要：而我覺得現(xiàn)在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。而這個不會合并，直接替換掉整個選項寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版...

CollinPeng 2019-08-23 18:25 評論0 收藏0