vue中$mount的作用是什么

今天就跟大家聊聊有關(guān)vue中$mount的作用是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

浦江ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

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

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

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

 

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

  

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

• 將template解析成ast語法樹。

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

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

  

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

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

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

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

• vm:當(dāng)前的vm實(shí)例

• updateComponent 這個(gè)非常重要，用來在后面將vnode更新到dom上的。

• noop 無意義的函數(shù)

• null option選項(xiàng)，沒有則為null

• true 主要是用來判斷是哪個(gè)watcher的。因?yàn)閏omputed計(jì)算屬性和如果你要在options里面配置watch了同樣也是使用了 new Watcher ，加上這個(gè)用以區(qū)別這三者。好，我們來看看 new Watcher 都做了什么事，如下圖。

 

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

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

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

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

接下來，就是賦值給 getter , this.getter = expOrFn 。還記得剛才傳過來的 updateComponent 函數(shù)么，沒錯(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;
}

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

看完上述內(nèi)容，你們對(duì)vue中$mount的作用是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前名稱：vue中$mount的作用是什么
網(wǎng)頁網(wǎng)址：http://bm7419.com/article22/jcscjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站策劃、商城網(wǎng)站、云服務(wù)器、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)