Vue 原始碼閱讀(七) bind

2021-09-13 04:01:19 字數 1085 閱讀 5713

class demo 

resize()

init()

}new demo()

**執行後,縮放瀏覽器,此時彈窗顯示undefined

符合預期!!

import vue from 'vue'

new vue(,

methods:

},mounted()

縮放瀏覽器,此時彈框顯示1

不符合預期!!

按常理,繫結事件this.resize後,將會丟失this所指向的上下文,所以第乙個**執行的結果是undefined

因此猜想,在 vue 的實現版本中,繫結是一定不是定義在methods下的resize方法。

src/core/instance/state.js#l258

function initmethods (vm: component, methods: object) 

}

可以看到在 vue 例項上繫結的方法,都是被bind處理過的。

src/shared/util.js#l203

function polyfillbind (fn: function, ctx: object): function 

boundfn._length = fn.length

return boundfn

}function nativebind (fn: function, ctx: object): function

export const bind = function.prototype.bind

? nativebind

: polyfillbind

由此可見, vue 的例項呼叫的方法,是經過bind後帶有上下文的新方法。

STL原始碼閱讀 七

set使用紅黑樹實現,每個鍵值都不相同,且按序儲存。注意operator 即 rb tree的實現 先銷毀賦值號左邊的set,然後將右邊的set拷貝給左邊的set,而不是原值替換。set的所有函式都是用 rb tree的函式實現的,相當於 rb tree的乙個包裝類。multiset使用紅黑樹實現,...

vue原始碼閱讀(一)

之前想要研究下vue的原始碼 網上一般直接就上來甩出雙向繫結等等的函式 這次看原始碼 想從乙個漸進式的方向來解讀。當前版本基本上是最新的版本,18年6月的最新版,版本號是2.5.17 當我們接觸乙個專案或者乙個框架 在沒有交接文件的情況下 首先第一印象是啥?肯定是目錄 通過查資料和看 基本確定了這些...

vue原始碼閱讀(二)

那麼下邊這個則是例項化建構函式,也就是開始使用了,不管是作為框架,還是作為外掛程式,都需要new一下。翻篇回去,先看vue的建構函式,this.init options 是呼叫的第乙個方法,包括傳進來的引數options,不過在這之前,還判斷了下呼叫vue的是不是先new出來的。根據注入的檔案 找到...