解析vue中的 mount

2022-10-06 19:39:13 字數 2257 閱讀 3488

$mount所做的工作從大體來講主要分為3步:

1.如果你的option裡面沒有 render 函式,那麼,通過 compiletofunctions 將html模板編譯成可以生成vnode的render函式。

2.new 乙個 watcher 例項,觸發 updatecomponent 方法。

3.生成vnode,經過patch,把vnode更新到dom上。 由於篇幅有限,這裡先說前兩步,第三步下篇說。 好,下面具體的說。首先,我們來到 $mount 函式,如下圖:

我們呢可以看到,**首先判斷option裡面有沒有render函式,沒有的話,進一步判斷有沒有template,沒有的話就用dom元素的outerhtml。得到template以後幹什麼了呢?如下圖。

我們可以看到,呼叫了 compiletofunctions 將template轉成render函式。這裡面有兩個過程:

具體的將template解析成ast語法樹在本文就不說了,有時間單獨開乙個章節分析。好,這下我們拿到render函式了,那麼接下來一步幹什麼了呢?沒錯,就開始 mountcomponent 了。如下圖:

可以從上圖看到,程式宣告了乙個 updatecomponent 方法,這個是將要被 watcher 例項呼叫的更新元件的方法,過一會分析到 watcher 的時候將會看到。至於為什麼會有個判斷語句來根據條件宣告 updatecomponent 方法,其實從 performance 可以看出,其中乙個方法是用來測試 render 和 update 效能的。好我們終於該到 watcher 了,先看這句**:

// we set this to vm._watcher inside the watcher's constructor

// since the watcher's initial patch may call $forceupdate (e.g. inside child

// component's mounted hook), which relies on vm._watcher being already defined

new watcher(vm, updatecomponent, noop, null, true /* isrenderwatcher */);

我們先來分析一下注釋裡所說的 _watcher 是啥玩意呢?其實看看 forceupdate 的**就知道了:

vue.prototype.$forceupdate = function ()

};就是呼叫這個vm的 _watcher 的 update 方法。用來強制更新。為什麼叫強制更新呢?vue裡面有判斷,如果新值 == 舊值, 那麼就不觸發watcher更新檢視了~ 所以,如果非要更新就要呼叫 forceupdate 來強制更新了。好,讓我們來看一看傳進去的引數吧:

首先,我們看到**有個這個判斷

if (isrenderwatcher)

可以看到,如果宣告這個watcher的上下文是用來渲染檢視的,也就是說是在 mountcomponent 這裡呼叫的 new watcher 的時候,才會把this賦值給_watcher。然後把 watcher push到 _watchers 裡面,目的是等到元件銷毀時順便把watcher也銷毀掉。然後就是初始化watcher的成員,**如下:

this.deep = this.user = this.lazy = this.sync = false;

接下來,就是賦值給 getter , this.getter = exporfn 。還記得剛才傳過來的 updatecomponent 函式麼,沒錯,就是這個賦值給我 getter 。然後我們就到了:

www.cppcns.com

this.value = this.lazy

? undefined

: this.get();

進入到 get 方法裡面,我們看看到底做了什麼。get**如下圖:

我們可以看到,首先它執行的是 pushtarget(this) , pushtargetnvfvfw(this) **如下:

function pushtarget (_target)

dep.target = _target;

}也就是說如果當前有 dep.target 的話,就把target放到 targetstack 裡面,如果沒有的話,就設為當前的target,也就是這個watcher。 接著,就是執行了它的 getter 屬性,也就是剛剛傳入 updatecomponent 函式。而 updatecomponent 就是我們開篇提到第三步了。

總結本文標題: 解析vue中的$mount

本文位址: /ruanjian/j**a/215347.html

VUE生命週期created和mounted的區別

每個 vue 例項在被建立時都要經過一系列的初始化過程。例如,需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的 的機會。created 在模板渲染成html前呼叫,即通常初始化某些屬性值...

vue原始碼2 mount掛載

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

linux 中 mount 命令的用法

mount 的命令引數有很多,下面只介紹下一些常用的引數 mount 的命令格式 mount t o device dir 例如要將映象掛載到指定資料夾 mnt cdrom下 mount t iso9660 o ro dev cdrom mnt cdrom 1.t 指定掛載檔案系統的型別,通常不需要...