vue原始碼學習 vm mount方法

2021-10-12 07:04:14 字數 873 閱讀 8585

vue原始碼版本為2.6.11(cdn位址為: 

注:在不同意的構建版本中, vm.$mount的表現都不一樣

完整版vm.$mount的實現原理:

(1)基本結構:

var mount = vue.prototype.$mount;

vue.prototype.$mount = function (el, hydrating)

將vue原型上的$mount方法儲存在mount中,以便後續呼叫;

然後vue 原型上的$mount方法被乙個新的方法覆蓋了,新方法中會呼叫之前原始的方法,這種做法通常被稱為函式劫持;

通過函式劫持,可以在原始功能上新增一些其他功能,上面**中,vm.$mount的原始方法就是mount的核心功能,而在完整版中需要將編譯功能新增到核心功能上去

(2) 獲取dom元素:

由於el引數支援元素型別或者字串型別的選擇器,所以第一步是通過el獲取dom元素:

使用query方法獲取dom元素 

function query (el) 

return selected

} else

}

接下來就是判斷vue例項中是否存在渲染函式,只有不存在時,才會將模板編譯成渲染函式:

var options = this.$options;

// 解析template/el並轉換為render函式

if (!options.render)

} else if (template.nodetype) else

return this

}} else if (el)

}

vue原始碼學習

new vue發生了什麼 此處只針對最簡單基礎的new vue過程,一般專案中採用.vue單檔案元件的形式開發,下面會介紹 對於 runtime compile 版本 初始化乙個 vue 例項的一系列相關環境 watcher,lifecycle,methods等等 compile 將 templat...

Vue原始碼學習筆記

最近偷懶好久沒有寫部落格了,一直想繼續vue學習系列,想深入vue原始碼來寫。結果發現自己層次不夠,對js的理解差好多。所以一直想寫一直擱置著。最近重新振作決心看完vue原始碼,並且以我們這類前端小白的角度來一步步弄懂vue原始碼。vue.js 本質上就是乙個包含各種邏輯的乙個function。而我...

vue原始碼學習筆記

最近在看vue的原始碼,因為本人比較小白,所以很多地方理解起來會有一定難度,好在有很多大分享了vue原始碼相關的文章,整理一下吧 vue.js 原始碼學習筆記 囧克斯,這篇文章是老師推薦的,裡面總結了vue原始碼中比較值得關注的地方,不過文章應該寫的比較早了,文中講的vue是以前的版本,檔案結構會和...