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

$mount所做的工作從大體來(lái)講主要分為3步：

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

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

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

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

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

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

具體的將template解析成ast語(yǔ)法樹(shù)在本文就不說(shuō)了，有時(shí)間單獨(dú)開(kāi)一個(gè)章節(jié)分析。好，這下我們拿到render函數(shù)了，那么接下來(lái)一步干什么了呢？沒(méi)錯(cuò)，就開(kāi)始 mountComponent 了。如下圖：

可以從上圖看到，程序聲明了一個(gè) updateComponent 方法，這個(gè)是將要被 Watcher 實(shí)例調(diào)用的更新組件的方法，過(guò)一會(huì)分析到 Watcher 的時(shí)候?qū)?huì)看到。至于為什么會(huì)有個(gè)判斷語(yǔ)句來(lái)根據(jù)條件聲明 updateComponent 方法，其實(shí)從 performance 可以看出，其中一個(gè)方法是用來(lái)測(cè)試 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 */);

我們先來(lái)分析一下注釋里所說(shuō)的 _watcher 是啥玩意呢？其實(shí)看看 forceupdate 的代碼就知道了:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

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

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

首先，我們看到代碼有個(gè)這個(gè)判斷

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論