本文主要是帶領(lǐng)大家分析$mount。

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

1.如果你的option里面沒有 render 函數(shù)，那么，通過 compileToFunctions 將HTML模板編譯成可以生成VNode的Render函數(shù)。

2.new 一個 Watcher 實例，觸發(fā) updateComponent 方法。

3.生成vnode，經(jīng)過patch，把vnode更新到dom上。 由于篇幅有限，這里先說前兩步，第三步下篇說。 好，下面具體的說。首先，我們來到 $mount 函數(shù)，如下圖：

我們呢可以看到，代碼首先判斷option里面有沒有render函數(shù)，沒有的話，進一步判斷有沒有template，沒有的話就用dom元素的outerHTML。得到template以后干什么了呢？如下圖。

我們可以看到，調(diào)用了 compileToFunctions 將template轉(zhuǎn)成render函數(shù)。這里面有兩個過程：

• 將template解析成ast語法樹。
• 通過ast語法樹生成render函數(shù)。

具體的將template解析成ast語法樹在本文就不說了，有時間單獨開一個章節(jié)分析。好，這下我們拿到render函數(shù)了，那么接下來一步干什么了呢？沒錯，就開始 mountComponent 了。如下圖：

可以從上圖看到，程序聲明了一個 updateComponent 方法，這個是將要被 Watcher 實例調(diào)用的更新組件的方法，過一會分析到 Watcher 的時候?qū)吹健Ｖ劣跒槭裁磿袀€判斷語句來根據(jù)條件聲明 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 () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

就是調(diào)用這個vm的 _watcher 的 update 方法。用來強制更新。為什么叫強制更新呢？vue里面有判斷，如果新值 == 舊值， 那么就不觸發(fā)watcher更新視圖了~ 所以，如果非要更新就要調(diào)用 forceupdate 來強制更新了。好，讓我們來看一看傳進去的參數(shù)吧:

• vm:當(dāng)前的vm實例
• updateComponent 這個非常重要，用來在后面將vnode更新到dom上的。
• noop 無意義的函數(shù)
• null option選項，沒有則為null
• true 主要是用來判斷是哪個watcher的。因為computed計算屬性和如果你要在options里面配置watch了同樣也是使用了 new Watcher ，加上這個用以區(qū)別這三者。好，我們來看看 new Watcher 都做了什么事，如下圖。
  

首先，我們看到代碼有個這個判斷

if (isRenderWatcher) {
 vm._watcher = this;
}

可以看到，如果聲明這個watcher的上下文是用來渲染視圖的，也就是說是在 mountComponent 這里調(diào)用的 new Watcher 的時候，才會把this賦值給_watcher。然后把 watcher push到 _watchers 里面，目的是等到組件銷毀時順便把watcher也銷毀掉。然后就是初始化watcher的成員，代碼如下：

this.deep = this.user = this.lazy = this.sync = false;<br />

接下來，就是賦值給 getter , this.getter = expOrFn 。還記得剛才傳過來的 updateComponent 函數(shù)么，沒錯，就是這個賦值給我 getter 。然后我們就到了：

this.value = this.lazy
 ? undefined
 : this.get();

進入到 get 方法里面，我們看看到底做了什么。get代碼如下圖:

我們可以看到，首先它執(zhí)行的是 pushTarget(this) ， pushTarget(this) 代碼如下：

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

也就是說如果當(dāng)前有 Dep.target 的話，就把target放到 targetStack 里面，如果沒有的話，就設(shè)為當(dāng)前的target，也就是這個watcher。 接著，就是執(zhí)行了它的 getter 屬性，也就是剛剛傳入 updateComponent 函數(shù)。而 updateComponent 就是我們開篇提到第三步了。

總結(jié)

以上所述是小編給大家介紹的vue中的$mount，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論