這里給大家分享我在網(wǎng)上總結(jié)出來(lái)的一些知識(shí)，希望對(duì)大家有所幫助

一、概述

在我們開(kāi)發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類(lèi)來(lái)構(gòu)造函數(shù)，通過(guò)new 得到子類(lèi)的實(shí)例，然后通過(guò)$mount掛載到節(jié)點(diǎn)，如代碼：

<div id="mount-point"></div>
<!-- 創(chuàng)建構(gòu)造器 -->
var Profile = Vue.extend({
 template:'<p>{{firstName}} {{lastName}} aka{{alias}}</p>',
 data:function(){
  return{
   firstName:'Walter',
   lastName:'White',
   alias:'Heisenberg'
  }
 }
})
<!-- 創(chuàng)建Profile實(shí)例，并掛載到一個(gè)元素上 -->
new Profile().$mount('#mount-point');

$mount方法是怎么實(shí)現(xiàn)的，篇文章就來(lái)講一下

二、使用方式

vm.$mount( [elementOrSelector] )

（1）參數(shù)

{ Element | string } [elementOrSelector]

（2）返回值

　　vm，即實(shí)例本身。

（3）用法

1、如果Vue.js實(shí)例在實(shí)例化時(shí)沒(méi)有收到el選項(xiàng)，則它處于“未掛載”狀態(tài)，沒(méi)有關(guān)聯(lián)的DOM元素。

2、可以使用vm.$mount手動(dòng)掛載一個(gè)未掛載的實(shí)例。

3、如果沒(méi)有提供elementOrSelector參數(shù)，模板將被渲染為文檔之外的元素，并且必須使用原生DOM的API把它插入文檔中。

4、這個(gè)方法返回實(shí)例自身，因而可以鏈?zhǔn)秸{(diào)用其他實(shí)例方法。

（4）例子

var MyComponent = Vue.extend({
 template:'<div>Hello!</div>',
})
<!-- 創(chuàng)建并掛載到#app（會(huì)替換#app） -->
new MyComponent().$mount('#app');
<!-- 創(chuàng)建并掛載到#app（會(huì)替換#app） -->
new MyComponent().$mount({el:'#app'});
<!-- 創(chuàng)建并掛載到#app（會(huì)替換#app） -->
var component = new MyComponent().$mount();
document.getElementById('app').appendChild(component.$el);

1、在不同的構(gòu)建版本中，vm.$mount的表現(xiàn)都不一樣。其差異主要體現(xiàn)在完整版（vue.js）和只包含運(yùn)行時(shí)版本（vue.runtime.js）之間。

2、完整版和只包含運(yùn)行時(shí)版本之間的差異在于是否有編譯器，而是否有編譯器的差異主要在于vm.$mount方法的表現(xiàn)形式。

3、在只包含運(yùn)行時(shí)的構(gòu)建版本中，vm.mount的作用會(huì)稍有不同，它首先會(huì)檢查template或el選項(xiàng)所提供的模板是否已經(jīng)轉(zhuǎn)換成渲染函數(shù)（render函數(shù)）。如果沒(méi)有，則立即進(jìn)入編譯過(guò)程，將模板編譯成渲染函數(shù)，完成之后再進(jìn)入掛載與渲染的流程中。

4、只包含運(yùn)行時(shí)版本的vm.$mount沒(méi)有編譯步驟，它會(huì)默認(rèn)實(shí)例上已經(jīng)存在渲染函數(shù)，如果不存在，則會(huì)設(shè)置一個(gè)。并且，這個(gè)渲染函數(shù)在執(zhí)行時(shí)會(huì)返回一個(gè)空節(jié)點(diǎn)的VNode，以保證執(zhí)行時(shí)不會(huì)因?yàn)楹瘮?shù)不存在而報(bào)錯(cuò)。同時(shí)如果是開(kāi)發(fā)環(huán)境下運(yùn)行，Vue.js會(huì)觸發(fā)警告，提示我們當(dāng)前使用的是只包含運(yùn)行時(shí)的版本，會(huì)讓我們提供渲染函數(shù)，或者去使用完整的構(gòu)建版本。

5、從原理的角度來(lái)講，完整版和只包含運(yùn)行時(shí)版本之間是包含關(guān)系，完整版包含只包含運(yùn)行時(shí)版本。

三、完整版vm.$mount的實(shí)現(xiàn)原理

（1）實(shí)現(xiàn)代碼

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
 <!-- 做些什么 -->
 return mount.call(this,el);
}

1、將Vue原型上的$mount方法保存在mount中，以便后續(xù)使用。

2、然后Vue原型上的$mount方法被一個(gè)新的方法覆蓋了。新方法中會(huì)調(diào)用原始的方法，這種做法通常被稱(chēng)為函數(shù)劫持。（看源碼的同學(xué)可能發(fā)現(xiàn)了，vue多處用了函數(shù)劫持的做法，例如：對(duì)數(shù)組實(shí)現(xiàn)監(jiān)聽(tīng)的時(shí)候...）

3、通過(guò)函數(shù)劫持，可以在原始功能上新增一些其他功能。上面代碼中，vm.$mount的原始方法就是mount的核心功能，而在完整版中需要將編譯功能新增到核心功能上去。

（2）由于el參數(shù)支持元素類(lèi)型或者字符串類(lèi)型的選擇器，所以第一步是通過(guò)el獲取DOM元素。

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
    el = el && query(el);
    return mount.call(this,el);
}

使用query獲取DOM元素

function query(el){
    if(typeof el === 'string'){
        const selected = document.querySelector(el);
        if(!selected){
            return document.createElement('div');
        }
        return selected;
    }else{
        return el;
    }
}

1、如果el是字符串，則使用doucment.querySelector獲取DOM元素，如果獲取不到，則創(chuàng)建一個(gè)空的div元素。

2、如果el不是字符串，那么認(rèn)為它是元素類(lèi)型，直接返回el（如果執(zhí)行vm.$mount方法時(shí)沒(méi)有傳遞el參數(shù)，則返回undefined）

（3）編譯器

1、首先判斷Vue.js實(shí)例中是否存在渲染函數(shù)，只有不存在時(shí)，才會(huì)將模板編譯成渲染函數(shù)。

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
 el = el && query(el);
 const options = this.$options;
 if(!options.render){
  <!-- 將模板編譯成渲染函數(shù)并賦值給options.render -->
 }
    return mount.call(this,el);
}

2、在實(shí)例化Vue.js時(shí)，會(huì)有一個(gè)初始化流程，其中會(huì)向Vue.js實(shí)例上新增一些方法，這里的this.$options就是其中之一，它可以訪問(wèn)到實(shí)例化Vue.js時(shí)用戶(hù)設(shè)置的一些參數(shù)，例如tempalte和render。

3、如果在實(shí)例化Vue.js時(shí)給出了render選項(xiàng)，那么template其實(shí)是無(wú)效的，因?yàn)椴粫?huì)進(jìn)入模板編譯的流程，而是直接使用render選項(xiàng)中提供的渲染函數(shù)。

4、Vue.js在官方文檔的template選項(xiàng)中也給出了相應(yīng)的提示。如果沒(méi)有render選項(xiàng)，那么需要獲取模板并將模板編譯成渲染函數(shù)（render函數(shù)）賦值給render選項(xiàng)。

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
 el = el && query(el);
 const options = this.$options;
 if(!options.render){
  <!-- 新增獲取模板相關(guān)邏輯 -->
  let template = options.template;
  if(template){
  
  }else if(el){
   template = getOuterHTML(el);
  }
 }
    return mount.call(this,el);
}

5、從選項(xiàng)中取出template選項(xiàng)，也就是取出用戶(hù)實(shí)例化Vue.js時(shí)設(shè)置的模板。如果沒(méi)有取到，說(shuō)明用戶(hù)沒(méi)有設(shè)置tempalte選項(xiàng)。那么使用getOuterHTML方法從用戶(hù)提供的el選項(xiàng)中獲取模板。

function getOuterHTML(el){
 if(el.outerHTML){
  return el.outerHTML;
 }else{
  const container = document.createElement('div');
  container.appendChild(el.cloneNode(true));
  return container.innerHTML;
 }
}

6、getOuterHTML方法會(huì)返回參數(shù)中提供的DOM元素的HTML字符串。

7、整體邏輯

如果用戶(hù)沒(méi)有通過(guò)template選項(xiàng)設(shè)置模板，那么會(huì)從el選項(xiàng)中獲取HTML字符串當(dāng)作模板。如果用戶(hù)提供了template選項(xiàng)，那么需要對(duì)它進(jìn)一步解析，因?yàn)檫@個(gè)選項(xiàng)支持很多種使用方式。template選項(xiàng)可以直接設(shè)置成字符串模板，也可以設(shè)置為以#開(kāi)頭的選擇符，還可以設(shè)置成DOM元素。

8、從不同的格式中將模板解析出來(lái)

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
 el = el && query(el);
 const options = this.$options;
 if(!options.render){
  <!-- 新增獲取模板相關(guān)邏輯 -->
  let template = options.template;
  if(template){
   if(typeof tempalte === 'string'){
    if(tempalte.charAt(0) === "#"){
     template = idToTemplate(tempalte);
    }
   }else if(tempalte.nodeType){
    template = template.innerHTML;
   }else{
    if(process.env.NODE_ENV !== 'production'){
     warn('invalid template option:'+tempalte,this);
    }
    return this;
   }
  }else if(el){
   template = getOuterHTML(el);
  }
 }
    return mount.call(this,el);
}

9、如果tempalte是字符串并且以#開(kāi)頭，則它將被用作選擇符。通過(guò)選擇符獲取DOM元素后，會(huì)使用innerHTML作為模板。

10、使用idToTemplate方法從選擇符中獲取模板。idToTemplate使用選擇符獲取DOM元素之后，將它的innerHTML作為模板。

function idToTemplate(id){
 const el = query(id);
 return el && el.innerHTML;
}

11、如果template是字符串，但不是以#開(kāi)頭，就說(shuō)明template是用戶(hù)設(shè)置的模板，不需要進(jìn)行任何處理，直接使用即可。

12、如果template選項(xiàng)的類(lèi)型不是字符串，則判斷它是否是一個(gè)DOM元素，如果是，則使用DOM元素的innerHTML作為模板。如果不是，只需要判斷它是否具備nodeType屬性即可。

13、如果tempalte選項(xiàng)既不是字符串，也不是DOM元素，那么Vue.js會(huì)觸發(fā)警告，提示用戶(hù)template選項(xiàng)是無(wú)效的。

14、獲取模板之后，下一步是將模板編譯成渲染函數(shù)，通過(guò)執(zhí)行compileToFunctions函數(shù)可以將模板編譯成渲染函數(shù)并設(shè)置到this.options上。

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el){
 el = el && query(el);
 const options = this.$options;
 if(!options.render){
  <!-- 新增獲取模板相關(guān)邏輯 -->
  let template = options.template;
  if(template){
   if(typeof tempalte === 'string'){
    if(tempalte.charAt(0) === "#"){
     template = idToTemplate(tempalte);
    }
   }else if(tempalte.nodeType){
    template = template.innerHTML;
   }else{
    if(process.env.NODE_ENV !== 'production'){
     warn('invalid template option:'+tempalte,this);
    }
    return this;
   }
  }else if(el){
   template = getOuterHTML(el);
  }
  <!-- 新增編譯相關(guān)邏輯 -->
  if(tempalte){
   const { render } = compileToFunctions(
    template,
    {...},
    this
   )
   options.render = render;
  }
 }
    return mount.call(this,el);
}

15、將模板編譯成代碼字符串并將代碼字符串轉(zhuǎn)換成渲染函數(shù)的過(guò)程是在compileToFunctions函數(shù)中完成的，其內(nèi)部實(shí)現(xiàn)如下

function compileToFunctions(template,options,vm){
 options = extend({},options);
 <!-- 檢查緩存 -->
 const key = options.delimiters
 ? String(options.delimiters)+tempalte
 :template;
 if(cache[key]){
  return cache[key];
 }
 <!-- 編譯 -->
 const compiled = compile(template,options);
 <!-- 將代碼字符串轉(zhuǎn)換為函數(shù) -->
 const res = {};
 res.render = createFunction(compiled.render);
 return (cache[key] = res)
}
function createFunction(code){
 return new Function(code);
}

1）首先，將options屬性混合到空對(duì)象中，其目的是讓options稱(chēng)為可選參數(shù)。

2）檢查緩存中是否已經(jīng)存在編譯后的模板。如果模板已經(jīng)被編譯，就會(huì)直接返回緩存中的結(jié)果，不會(huì)重復(fù)編譯，保證不做無(wú)用功來(lái)提升性能。

3）調(diào)用compile函數(shù)來(lái)編譯模板，將模板編譯成代碼字符串并存儲(chǔ)在compiled中的render屬性中。

4）調(diào)用createFunction函數(shù)將代碼字符串轉(zhuǎn)換成函數(shù)。其實(shí)現(xiàn)原理箱單簡(jiǎn)單，使用new Function(code)就可以完成。

5）在代碼字符串被new Function(code)轉(zhuǎn)換成函數(shù)之后，當(dāng)調(diào)用函數(shù)時(shí)，代碼字符串會(huì)被執(zhí)行。例如

const code = 'console.log("Hello Berwin")';
const render = new Function(code);
render();//Hello Berwin

6）最后，將渲染函數(shù)返回給調(diào)用方。

16、當(dāng)通過(guò)compileToFunctions函數(shù)得到渲染函數(shù)之后，將渲染函數(shù)設(shè)置到this.$options上。

四、只包含運(yùn)行時(shí)版本的vm.$mount的實(shí)現(xiàn)原理

（1）只包含運(yùn)行時(shí)版本的vm.mount方法的核心功能。實(shí)現(xiàn)如下

Vue.prototype.$mount = function(el){
 el = el && inBrower ? query(el) : undefined;
 return mountComponent(this,el);
}

1、$mount方法將ID轉(zhuǎn)換為DOM元素后，使用mountComponent函數(shù)將Vue.js實(shí)例掛載到DOM元素上。

2、將實(shí)例掛載到DOM元素上指的是將模板渲染到指定的DOM元素中，而且是持續(xù)性的，以后當(dāng)數(shù)據(jù)（狀態(tài)）發(fā)生變化時(shí)，依然可以渲染到指定的DOM元素中。

3、實(shí)現(xiàn)這個(gè)功能需要開(kāi)啟watcher。

watcher將持續(xù)觀察模板中用到的所有數(shù)據(jù)（狀態(tài)），當(dāng)這些數(shù)據(jù)（狀態(tài)）被修改時(shí)它將得到通知，從而進(jìn)行渲染操作。這個(gè)過(guò)程回持續(xù)到實(shí)例被銷(xiāo)毀。

export function mountComponent(vm,el){
 if(!vm.$options.render){
  vm.$options.render = createEmptyVNode;
  if(process.env.NODE_ENV !== 'production'){
   <!-- 在開(kāi)發(fā)環(huán)境發(fā)出警告 -->
  }
 }
}

4、mountComponent方法會(huì)判斷實(shí)例上是否存在渲染函數(shù)。如果不存在，則設(shè)置一個(gè)默認(rèn)的渲染函數(shù)createEmptyVNode，該渲染函數(shù)執(zhí)行后，會(huì)返回一個(gè)注釋類(lèi)型的VNode節(jié)點(diǎn)。

5、事實(shí)上，如果在mountComponent方法中發(fā)現(xiàn)實(shí)例上沒(méi)有渲染函數(shù)，則會(huì)將el參數(shù)指定頁(yè)面中的元素節(jié)點(diǎn)替換成一個(gè)注釋節(jié)點(diǎn)，并且在開(kāi)發(fā)環(huán)境下在瀏覽器的控制臺(tái)中給出警告。

（2）Vue.js實(shí)例在不同的階段會(huì)觸發(fā)不同的生命周期鉤子，在掛載實(shí)例之前會(huì)觸發(fā)beforeMount鉤子函數(shù)。

export function mountComponent(vm,el){
 if(!vm.$options.render){
  vm.$options.render = createEmptyVNode;
  if(process.env.NODE_ENV !== 'production'){
   <!-- 在開(kāi)發(fā)環(huán)境發(fā)出警告 -->
  }
  callHook(vm,'beforeMount')
 }
}

1、鉤子函數(shù)觸發(fā)后，將執(zhí)行真正的掛載操作。掛載操作與渲染類(lèi)似，不同的是渲染指的是渲染一次，而掛載指的是持續(xù)性渲染。掛載之后，每當(dāng)狀態(tài)發(fā)生變化時(shí)，都會(huì)進(jìn)行渲染操作。

（3）mountComponent具體實(shí)現(xiàn)

export function mountComponent(vm,el){
 if(!vm.$options.render){
  vm.$options.render = createEmptyVNode;
  if(process.env.NODE_ENV !== 'production'){
   <!-- 在開(kāi)發(fā)環(huán)境發(fā)出警告 -->
  }
  <!-- 觸發(fā)生命周期鉤子 -->
  callHook(vm,'beforeMount');
  <!-- 掛載 -->
  vm._watcher = new Watcher(vm,()=>{
   vm._update(vm._render())
  },noop);
  <!-- 觸發(fā)生命周期鉤子 -->
  callHook(vm,'mounted');
  return vm;
 }
}

1、vm._update作用：調(diào)用虛擬DOM中的patch方法來(lái)執(zhí)行節(jié)點(diǎn)的比對(duì)與渲染操作。

2、vm._render作用：執(zhí)行渲染函數(shù)，得到一份新的VNode節(jié)點(diǎn)樹(shù)。

3、vm._update(vm._render())作用：先調(diào)用渲染函數(shù)得到一份最新的VNode節(jié)點(diǎn)樹(shù)，然后通過(guò)vm._update方法對(duì)最新的VNode和上一次渲染用到的舊VNode進(jìn)行對(duì)比并更新DOM節(jié)點(diǎn)。簡(jiǎn)單來(lái)說(shuō)，就是執(zhí)行了渲染操作。

（4）掛載是持續(xù)性的，而持續(xù)性的關(guān)鍵就在于new Watcher這行代碼。

1、Watcher的第二個(gè)參數(shù)支持函數(shù)，并且當(dāng)它是函數(shù)時(shí)，會(huì)同時(shí)觀察函數(shù)中所讀取的所有Vue.js實(shí)例上的響應(yīng)式數(shù)據(jù)。

2、當(dāng)watcher執(zhí)行函數(shù)時(shí)，函數(shù)中所讀取的數(shù)據(jù)都將會(huì)觸發(fā)getter去全局找到watcher并將其收集到函數(shù)的依賴(lài)列表中。即，函數(shù)中讀取的所有數(shù)據(jù)都將被watcher觀察。這些數(shù)據(jù)中的任何一個(gè)發(fā)生變化時(shí)，watcher都將得到通知。

3、當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，watcher會(huì)一次又一次地執(zhí)行函數(shù)進(jìn)入渲染流程，如此反復(fù)，這個(gè)過(guò)程會(huì)持續(xù)到實(shí)例被銷(xiāo)毀。

4、掛載完畢后，會(huì)觸發(fā)mounted鉤子函數(shù)。

如果不懂watcher，其實(shí)可以去掉看，就簡(jiǎn)單很多

export function mountComponent(vm,el){
 if(!vm.$options.render){
  vm.$options.render = createEmptyVNode;
  if(process.env.NODE_ENV !== 'production'){
   <!-- 在開(kāi)發(fā)環(huán)境發(fā)出警告 -->
  }
  <!-- 觸發(fā)生命周期鉤子 -->
  callHook(vm,'beforeMount');
  <!-- 掛載 -->
   
   vm._update(vm._render())
   
  <!-- 觸發(fā)生命周期鉤子 -->
  callHook(vm,'mounted');
  return vm;
 }
}

這樣，是不是很容易理解了。整個(gè)mountComponent，一句關(guān)鍵代碼：vm._update(vm._render())，表示通過(guò)執(zhí)行vm._render()得到VNode，再把VNode傳入vm._update（） ，vm._update（）得功能是 將傳入的VNode 變成 真實(shí)Dom渲染到頁(yè)面。

簡(jiǎn)單地總結(jié)一下：

$mount()的思路就是， 判斷 用戶(hù)傳入的option有沒(méi)有render函數(shù)，

1.有的話(huà)就走運(yùn)行時(shí)版本，

2.沒(méi)有的話(huà)就自動(dòng)生成render函數(shù)，然后在執(zhí)行運(yùn)行時(shí)版本（其實(shí)這就是編譯時(shí)版本，比運(yùn)行時(shí)版本多了異步生成render函數(shù)的步驟）。

執(zhí)行運(yùn)行時(shí)版本的時(shí)候，

通過(guò)render()獲得Vnode把Vnode傳入_update() 實(shí)現(xiàn)渲染

到此這篇關(guān)于Vue源碼學(xué)習(xí)記錄之手寫(xiě)vm.$mount方法 的文章就介紹到這了,更多相關(guān)vue vm.$mount方法 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論