溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在正文開始之前，先了解vue基于源碼構建的兩個版本，一個是 runtime only ，另一個是 runtime加compiler 的版本，兩個版本的主要區別在于后者的源碼包括了一個編譯器。
什么是編譯器，百度百科上面的解釋是
簡單講，編譯器就是將“一種語言（通常為高級語言）”翻譯為“另一種語言（通常為低級語言）”的程序。一個現代編譯器的主要工作流程：源代碼 (source code) → 預處理器 (preprocessor) → 編譯器 (compiler) → 目標代碼 (object code) → 鏈接器 (Linker) → 可執行程序 (executables)。
通俗點講，編譯器是一個提供了將源代碼轉化為目標代碼的工具。更進一步理解，vue內置的編譯器實現了將 .vue 文件轉換編譯為可執行javascript腳本的功能。
一個完整的vue版本是包含編譯器的，我們可以使用 template 進行模板編寫。編譯器會自動將模板編譯成 render 函數。
// 需要編譯器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})
而對于一個不包含編譯器的 runtime-only 版本，需要傳遞一個編譯好的 render 函數，如下所示：
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
很明顯，編譯過程對性能有一定的損耗，并且由于加入了編譯過程的代碼，vue代碼體積也更加龐大，所以我們可以借助webpack的vue-loader工具進行編譯，將編譯階段從vue的構建中剝離出來，這樣既優化了性能，也縮小了體積。
vue掛載的流程是比較復雜的，我們通過流程圖理清基本的實現思路。
如果用一句話概括掛載的過程，可以描述為掛載組件，將渲染函數生成虛擬DOM，更新視圖時，將虛擬DOM渲染成為真正的DOM。
詳細的過程是：首先確定掛載的DOM元素，且必須保證該元素不能為 html，body 這類跟節點。判斷選項中是否有 render 這個屬性(如果不在運行時編譯，則在選項初始化時需要傳遞 render 渲染函數)。當有 render 這個屬性時，默認我們使用的是 runtime-only 的版本，從而跳過模板編譯階段，調用真正的掛載函數 $mount 。另一方面，當我們傳遞是 template 模板時(即在不使用外置編譯器的情況下，我們將使用 runtime+compile 的版本)，Vue源碼將首先進入編譯階段。該階段的核心是兩步，一個是把模板解析成抽象的語法樹，也就是我們常聽到的 AST ，第二個是根據給定的AST生成目標平臺所需的代碼，在瀏覽器端是前面提到的 render 函數。完成模板編譯后，同樣會進入 $mount 掛載階段。真正的掛載過程，執行的是 mountComponent 方法，該函數的核心是實例化一個渲染 watcher ,具體 watcher 的內容，另外放章節討論。我們只要知道渲染 watcher 的作用，一個是初始化的時候會執行回調函數，另一個是當 vm 實例中監測的數據發生變化的時候執行回調函數。而這個回調函數就是 updateComponent ，這個方法會通過 vm._render 生成虛擬 DOM ，并最終通過 vm._update 將虛擬 DOM 轉化為真正的 DOM 。
往下，我們從代碼的角度出發，了解一下掛載的實現思路，下面只提取mount骨架代碼說明。
// 內部真正實現掛載的方法
Vue.prototype.$mount = function (el, hydrating) {
el = el && inBrowser ? query(el) : undefined;
// 調用mountComponent方法掛載
return mountComponent(this, el, hydrating)
};
// 緩存了原型上的 $mount 方法
var mount = Vue.prototype.$mount;
// 重新定義$mount,為包含編譯器和不包含編譯器的版本提供不同封裝，最終調用的是緩存原型上的$mount方法
Vue.prototype.$mount = function (el, hydrating) {
// 獲取掛載元素
el = el && query(el);
// 掛載元素不能為跟節點
if (el === document.body || el === document.documentElement) {
warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
}
var options = this.$options;
// 需要編譯 or 不需要編譯
if (!options.render) {
···
// 使用內部編譯器編譯模板
}
// 最終調用緩存的$mount方法
return mount.call(this, el, hydrating)
}
// mountComponent方法思路
function mountComponent(vm, el, hydrating) {
// 定義updateComponent方法，在watch回調時調用。
updateComponent = function () {
// render函數渲染成虛擬DOM， 虛擬DOM渲染成真實的DOM
vm._update(vm._render(), hydrating);
};
// 實例化渲染watcher
new Watcher(vm, updateComponent, noop, {})
}
通過文章前半段的學習，我們對Vue的掛載流程有了一個初略的認識。接下來將先從模板編譯的過程展開。閱讀源碼時發現，模板的編譯過程是相當復雜的，要在短篇幅內將整個編譯的過程講開是不切實際的，因此這節剩余內容只會對實現思路做簡單的介紹。
template模板的編寫有三種方式，分別是：
// 1. 熟悉的字符串模板
var vm = new Vue({
el: '#app',
template: '<div>模板字符串</div>'
})
// 2. 選擇符匹配元素的 innerHTML模板
<div id="app">
<div>test1</div>
<script type="x-template" id="test">
<p>test</p>
</script>
</div>
var vm = new Vue({
el: '#app',
template: '#test'
})
// 3. dom元素匹配元素的innerHTML模板
<div id="app">
<div>test1</div>
<span id="test"><div class="test2">test2</div></span>
</div>
var vm = new Vue({
el: '#app',
template: document.querySelector('#test')
})
三種寫法對應代碼的三個不同分支。
var template = options.template;
if (template) {
// 針對字符串模板和選擇符匹配模板
if (typeof template === 'string') {
// 選擇符匹配模板，以'#'為前綴的選擇器
if (template.charAt(0) === '#') {
// 獲取匹配元素的innerHTML
template = idToTemplate(template);
/* istanbul ignore if */
if (!template) {
warn(
("Template element not found or is empty: " + (options.template)),
this
);
}
}
// 針對dom元素匹配
} else if (template.nodeType) {
// 獲取匹配元素的innerHTML
template = template.innerHTML;
} else {
// 其他類型則判定為非法傳入
{
warn('invalid template option:' + template, this);
}
return this
}
} else if (el) {
// 如果沒有傳入template模板，則默認以el元素所屬的根節點作為基礎模板
template = getOuterHTML(el);
}
其中X-Template模板的方式一般用于模板特別大的 demo 或極小型的應用，官方不建議在其他情形下使用，因為這會將模板和組件的其它定義分離開。
vue源碼中編譯流程代碼比較繞，涉及的函數處理邏輯比較多，實現流程中巧妙的運用了偏函數的技巧將配置項處理和編譯核心邏輯抽取出來，為了理解這個設計思路，我畫了一個邏輯圖幫助理解。
即便有流程圖，編譯邏輯理解起來依然比較晦澀，接下來，結合代碼分析每個環節的執行過程。
var ref = compileToFunctions(template, {
outputSourceRange: "development" !== 'production',
shouldDecodeNewlines: shouldDecodeNewlines,
shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this);
// 將compileToFunction方法暴露給Vue作為靜態方法存在
Vue.compile = compileToFunctions;
這是編譯的入口，也是Vue對外暴露的編譯方法。 compileToFunctions 需要傳遞三個參數： template 模板，編譯配置選項以及Vue實例。我們先大致了解一下配置中的幾個默認選項
1. delimiters 該選項可以改變純文本插入分隔符，當不傳遞值時，vue默認的分隔符為 {{}} ，用戶可通過該選項修改
2. comments 當設為 true 時，將會保留且渲染模板中的 HTML 注釋。默認行為是舍棄它們。
接著一步步尋找compileToFunctions根源
var createCompiler = createCompilerCreator(function baseCompile (template,options) {
//把模板解析成抽象的語法樹
var ast = parse(template.trim(), options);
// 配置中有代碼優化選項則會對Ast語法樹進行優化
if (options.optimize !== false) {
optimize(ast, options);
}
var code = generate(ast, options);
return {
ast: ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
});
createCompilerCreator 角色定位為創建編譯器的創建者。他傳遞了一個基礎的編譯器 baseCompile 作為參數， baseCompile 是真正執行編譯功能的地方，他傳遞template模板和基礎的配置選項作為參數。實現的功能有兩個
1.把模板解析成抽象的語法樹，簡稱 AST ，代碼中對應 parse 部分
2.可選：優化 AST 語法樹，執行 optimize 方法
3.根據不同平臺將 AST 語法樹生成需要的代碼，對應的 generate 函數
具體看看 createCompilerCreator 的實現方式。
function createCompilerCreator (baseCompile) {
return function createCompiler (baseOptions) {
// 內部定義compile方法
function compile (template, options) {
···
// 將剔除空格后的模板以及合并選項后的配置作為參數傳遞給baseCompile方法,其中finalOptions為baseOptions和用戶options的合并
var compiled = baseCompile(template.trim(), finalOptions);
{
detectErrors(compiled.ast, warn);
}
compiled.errors = errors;
compiled.tips = tips;
return compiled
}
return {
compile: compile,
compileToFunctions: createCompileToFunctionFn(compile)
}
}
}
createCompilerCreator 函數只有一個作用，利用偏函數將 baseCompile 基礎編譯方法緩存，并返回一個編譯器函數，該函數內部定義了真正執行編譯的 compile 方法，并最終將 compile 和 compileToFunctons 作為兩個對象屬性返回，這也是 compileToFunctions 的來源。而內部 compile 的作用，是為了將基礎的配置 baseOptions 和用戶自定義的配置 options 進行合并，( baseOptions 是跟外部平臺相關的配置)，最終返回合并配置后的 baseCompile 編譯方法。
compileToFunctions 來源于 createCompileToFunctionFn 函數的返回值，該函數會將編譯的方法 compile 作為參數傳入。
function createCompileToFunctionFn (compile) {
var cache = Object.create(null);
return function compileToFunctions (template,options,vm) {
options = extend({}, options);
···
// 緩存的作用：避免重復編譯同個模板造成性能的浪費
if (cache[key]) {
return cache[key]
}
// 執行編譯方法
var compiled = compile(template, options);
···
// turn code into functions
var res = {};
var fnGenErrors = [];
// 編譯出的函數體字符串作為參數傳遞給createFunction,返回最終的render函數
res.render = createFunction(compiled.render, fnGenErrors);
// 渲染優化相關
res.staticRenderFns = compiled.staticRenderFns.map(function (code) {
return createFunction(code, fnGenErrors)
});
···
return (cache[key] = res)
}
}
最終，我們找到了 compileToFunctions 真正的執行過程 var compiled = compile(template, options); ,并將編譯后的函數體字符串通過 creatFunction 轉化為 render 函數返回。
function createFunction (code, errors) {
try {
return new Function(code)
} catch (err) {
errors.push({ err: err, code: code });
return noop
}
}
其中函數體字符串類似于 "with(this){return _m(0)}" ,最終的render渲染函數為 function(){with(this){return _m(0)}}
至此，Vue中關于編譯過程的思路也梳理清楚了，編譯邏輯之所以繞，主要是因為Vue在不同平臺有不同的編譯過程，而每個編譯過程的 baseOptions 選項會有所不同，同時在同一個平臺下又不希望每次編譯時傳入相同的 baseOptions 參數，因此在 createCompilerCreator 初始化編譯器時便傳入參數，并利用偏函數將配置進行緩存。同時剝離出編譯相關的合并配置，這些都是Vue在編譯這塊非常巧妙的設計。
總結
以上所述是小編給大家介紹的Vue源碼實例掛載與編譯流程,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
