Vue原始碼解讀

2021-09-24 06:41:41 字數 1385 閱讀 7880

1、例項的屬性和方法(下圖)

2、原型上的屬性和方法(下圖)

3、原型鏈(下圖)

上圖有誤,後續修正

const vm = new vue()之後有:

vm.__proto__ === vue.prototype

vm.__proto__.__proto__ === object.prototype

vm.__proto__.__proto__.__proto__===null

vue.__proto__ === function.prototype

vue.__proto__.__proto__ === object.prototype

vue.__proto__.__proto__.__proto__===null

複製**

檢視vue的原始碼,例項化之後會執行原型鏈上的__init方法,該方法執行了一系列初始化動作:

function

vue(options)

this._init(options);

}vue.prototype._init = function (options)

}複製**

可以看到初始化動作做了很多事情,這也是為什麼說vue初始化的時候比react慢。

3-2-1、看原始碼,初始後之後開始mountcomponent()

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

複製**

3-2-2、mountcomponent()主要做了4件事
callhook(vm, 'beforemount');

vm._update(vm._render())

new watcher(vm, updatecomponent, noop,

}}, true

/* isrenderwatcher */);

if (vm.$vnode == null)

複製**

3-2-3、_render()一點說明(做了啥?)
vm._render() --> vm.$createelement() --> createelement()

--> createcomponent() --> installcomponents()

--> componentvnodehooks,

prepatch(){},

insert(),

destroy(){}

}複製**

Vue原始碼解讀(二) Vue原始碼構建

vue.js 原始碼是基於 rollup 構建的,它的構建相關配置都在 scripts 錄下。通常 個基於 npm 託管的項 都會有 個 package.json 件,它是對項 的描述 件,它的內容實際上是 個標準的 json 物件。我們通常會配置 script 字段作為 npm 的執 指令碼,vu...

Vue高階 原始碼解讀(前言)

原始碼結構 dist 專案構建後的檔案 scripts 與專案構建相關的指令碼和配置檔案 flow flow的型別宣告檔案 src 專案源 complier 與模板編譯相關的 core 通用的 與執行平台無關的執行時 observe 實現變化偵測的 vdom 實現virtual dom的 insta...

Vue 原始碼解讀(7) Hook Event

hook event 鉤子事件 相信很多 vue 開發者都沒有使用過,甚至沒聽過,畢竟 vue 官方文件中也沒有提及。vue 提供了一些生命週期鉤子函式,供開發者在特定的邏輯點新增額外的處理邏輯,比如 在元件掛載階段提供了beforemount和mounted兩個生命週期鉤子,供開發者在元件掛載階段...