Vue原始碼之 mount實現資料掛載(三)

2021-08-21 04:17:36 字數 1930 閱讀 1418

在vue例項中,通過$mount()實現例項的掛載,下面來分析一下$mount()函式都實現了什麼功能。

在'src/platforms/web/entry-runtime-with-compiler',$mount函式在vue的原型上被定義

1. 首先,提取出el所對應的dom元素。其中的query函式的主要用途是使用原生的queryselector(查詢第乙個匹配的dom元素)來查詢dom,如果沒有找到則新建乙個div返回;若el自身就是乙個dom元素,則直接返回。

但是,el不能是body或者html,原因是vue在掛載是會將對應的dom物件替換成新的div,但body和html是不適合替換的。

2. 若vue例項中沒有render,則將template編譯成render,也就是說vue只認render函式,同時,因為template可以寫成多掙形式,因此el也會轉換成template(使用getouthtml函式),再轉換成render

在getouterhtml中,主要是獲得el所對應的dom及其內容

3. 最後,呼叫mount函式完成渲染。

再上一層,在'runtime/index.js』中定義的$mount函式呼叫了mountcomponent函式

在『core/instance/lifecycle.js』中定義了mountcomponent函式:

1. 在該函式中,首先判斷是否有render

2. 然後,定義updatecomponent函式,該函式完成的功能是渲染和更新。至於什麼時候呼叫這個函式,這個過程是使用觀察者模式,由wacher一起完成的。

3. 在'src/core/observer/watach.js'中定義了watcher類,在建構函式中,傳入的引數中有乙個是否為渲染watcher,如果是,則將初始化例項的_watcher

然後,將getter賦值給exporfn,這裡傳給exporfn的是updatecomponent

隨後,呼叫get函式

在get函式中,主要是收集一些依賴,然後在初始化或者有更新時,呼叫this.getter(對應著updatecomponent函式)

在$mount中,首先是根據template將其轉換為render(在沒有render的情況下),然後呼叫mountcomponent函式,該函式主要呼叫的是updatecomponent函式。

updatecomponent函式使用渲染watcher,在初次渲染或者值發生改變的時候呼叫該函式(這個過程由wacher完成),使用了觀察者模式。

vue原始碼2 mount掛載

vue中是通過 mount函式來掛載vm的,mount和平台 構建方式都有關係 以下是對compiler版本的分析 首先函式定義在src platform web entry runtime with compiler.js中 const mount vue.prototype.mount 這裡快取...

Vue原始碼之createElement函式(五)

在render 函式中,最後呼叫的是createelement函式來返回vnode,那麼createelement函式到底完成了什麼功能 1.首先看一下vnode的定義 src core vdom vnode.js vnode被定義為乙個類。2.在createelement中,首先檢測data的型別...

vue原始碼之Array

目錄 響應式具體實現 陣列子集和新增元素的追蹤 array中的問題 object通過setter改變屬性的值,所以我們利用getter時傳送依賴收集,在setter時觸發依賴更新,而且vue將資料轉換成響應式資料是在資料初始化時,對object中之後的屬性新增和刪除操作,無法做到自動更新,而是通過v...