由於對Vue.js很感興趣,並且平時工做的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,並作了總結與輸出。javascript
文章的原地址:https://github.com/answershuto/learnVue。html
在學習過程當中,爲Vue加上了中文的註釋https://github.com/answershuto/learnVue/tree/master/vue-src,但願能夠對其餘想學習Vue源碼的小夥伴有所幫助。vue
可能會有理解存在誤差的地方,歡迎提issue指出,共同窗習,共同進步。java
首先看一下mount的代碼node
/*把本來不帶編譯的$mount方法保存下來,在最後會調用。*/
const mount = Vue.prototype.$mount
/*掛載組件,帶模板編譯*/
Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
/*處理模板templete,編譯成render函數,render不存在的時候纔會編譯template,不然優先使用render*/
if (!options.render) {
let template = options.template
/*template存在的時候取template,不存在的時候取el的outerHTML*/
if (template) {
/*當template是字符串的時候*/
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
/*當template爲DOM節點的時候*/
template = template.innerHTML
} else {
/*報錯*/
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
/*獲取element的outerHTML*/
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
/*將template編譯成render函數,這裏會有render以及staticRenderFns兩個返回,這是vue的編譯時優化,static靜態不須要在VNode更新時進行patch,優化性能*/
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
delimiters: options.delimiters
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`${this._name} compile`, 'compile', 'compile end')
}
}
}
/*Github:https://github.com/answershuto*/
/*調用const mount = Vue.prototype.$mount保存下來的不帶編譯的mount*/
return mount.call(this, el, hydrating)
}
經過mount代碼咱們能夠看到,在mount的過程當中,若是render函數不存在(render函數存在會優先使用render)會將template進行compileToFunctions獲得render以及staticRenderFns。譬如說手寫組件時加入了template的狀況都會在運行時進行編譯。而render function在運行後會返回VNode節點,供頁面的渲染以及在update的時候patch。接下來咱們來看一下template是如何編譯的。c++
首先,template會被編譯成AST語法樹,那麼AST是什麼?git
在計算機科學中,抽象語法樹(abstract syntax tree或者縮寫爲AST),或者語法樹(syntax tree),是源代碼的抽象語法結構的樹狀表現形式,這裏特指編程語言的源代碼。具體能夠查看抽象語法樹。github
AST會通過generate獲得render函數,render的返回值是VNode,VNode是Vue的虛擬DOM節點,具體定義以下:算法
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void; // rendered in this component's scope
functionalContext: Component | void; // only for functional component root nodes
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
raw: boolean; // contains raw HTML? (server only)
isStatic: boolean; // hoisted static node
isRootInsert: boolean; // necessary for enter transition check
isComment: boolean; // empty comment placeholder?
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node?
/*Github:https://github.com/answershuto*/
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions
) {
/*當前節點的標籤名*/
this.tag = tag
/*當前節點對應的對象,包含了具體的一些數據信息,是一個VNodeData類型,能夠參考VNodeData類型中的數據信息*/
this.data = data
/*當前節點的子節點,是一個數組*/
this.children = children
/*當前節點的文本*/
this.text = text
/*當前虛擬節點對應的真實dom節點*/
this.elm = elm
/*當前節點的名字空間*/
this.ns = undefined
/*編譯做用域*/
this.context = context
/*函數化組件做用域*/
this.functionalContext = undefined
/*節點的key屬性,被看成節點的標誌,用以優化*/
this.key = data && data.key
/*組件的option選項*/
this.componentOptions = componentOptions
/*當前節點對應的組件的實例*/
this.componentInstance = undefined
/*當前節點的父節點*/
this.parent = undefined
/*簡而言之就是是否爲原生HTML或只是普通文本,innerHTML的時候爲true,textContent的時候爲false*/
this.raw = false
/*靜態節點標誌*/
this.isStatic = false
/*是否做爲跟節點插入*/
this.isRootInsert = true
/*是否爲註釋節點*/
this.isComment = false
/*是否爲克隆節點*/
this.isCloned = false
/*是否有v-once指令*/
this.isOnce = false
}
// DEPRECATED: alias for componentInstance for backwards compat.
/* istanbul ignore next */
get child (): Component | void {
return this.componentInstance
}
}
關於VNode的一些細節,請參考VNode節點。編程
createCompiler用以建立編譯器,返回值是compile以及compileToFunctions。compile是一個編譯器,它會將傳入的template轉換成對應的AST樹、render函數以及staticRenderFns函數。而compileToFunctions則是帶緩存的編譯器,同時staticRenderFns以及render函數會被轉換成Funtion對象。
由於不一樣平臺有一些不一樣的options,因此createCompiler會根據平臺區分傳入一個baseOptions,會與compile自己傳入的options合併獲得最終的finalOptions。
首先仍是貼一下compileToFunctions的代碼。
/*帶緩存的編譯器,同時staticRenderFns以及render函數會被轉換成Funtion對象*/ function compileToFunctions ( template: string, options?: CompilerOptions, vm?: Component ): CompiledFunctionResult { options = options || {} /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production') { // detect possible CSP restriction try { new Function('return 1') } catch (e) { if (e.toString().match(/unsafe-eval|CSP/)) { warn( 'It seems you are using the standalone build of Vue.js in an ' + 'environment with Content Security Policy that prohibits unsafe-eval. ' + 'The template compiler cannot work in this environment. Consider ' + 'relaxing the policy to allow unsafe-eval or pre-compiling your ' + 'templates into render functions.' ) } } } /*Github:https://github.com/answershuto*/ // check cache /*有緩存的時候直接取出緩存中的結果便可*/ const key = options.delimiters ? String(options.delimiters) + template : template if (functionCompileCache[key]) { return functionCompileCache[key] } // compile /*編譯*/ const compiled = compile(template, options) // check compilation errors/tips if (process.env.NODE_ENV !== 'production') { if (compiled.errors && compiled.errors.length) { warn( `Error compiling template:\n\n${template}\n\n` + compiled.errors.map(e => `- ${e}`).join('\n') + '\n', vm ) } if (compiled.tips && compiled.tips.length) { compiled.tips.forEach(msg => tip(msg, vm)) } } // turn code into functions const res = {} const fnGenErrors = [] /*將render轉換成Funtion對象*/ res.render = makeFunction(compiled.render, fnGenErrors) /*將staticRenderFns所有轉化成Funtion對象 */ const l = compiled.staticRenderFns.length res.staticRenderFns = new Array(l) for (let i = 0; i < l; i++) { res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors) } // check function generation errors. // this should only happen if there is a bug in the compiler itself. // mostly for codegen development use /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production') { if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) { warn( `Failed to generate render function:\n\n` + fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'), vm ) } } /*存放在緩存中,以避免每次都從新編譯*/ return (functionCompileCache[key] = res) }
咱們能夠發現,在閉包中,會有一個functionCompileCache對象做爲緩存器。
/*做爲緩存,防止每次都從新編譯*/
const functionCompileCache: {
[key: string]: CompiledFunctionResult;
} = Object.create(null)
在進入compileToFunctions之後,會先檢查緩存中是否有已經編譯好的結果,若是有結果則直接從緩存中讀取。這樣作防止每次一樣的模板都要進行重複的編譯工做。
// check cache
/*有緩存的時候直接取出緩存中的結果便可*/
const key = options.delimiters
? String(options.delimiters) + template
: template
if (functionCompileCache[key]) {
return functionCompileCache[key]
}
在compileToFunctions的末尾會將編譯結果進行緩存
/*存放在緩存中,以避免每次都從新編譯*/
return (functionCompileCache[key] = res)
/*編譯,將模板template編譯成AST樹、render函數以及staticRenderFns函數*/
function compile ( template: string, options?: CompilerOptions ): CompiledResult {
const finalOptions = Object.create(baseOptions)
const errors = []
const tips = []
finalOptions.warn = (msg, tip) => {
(tip ? tips : errors).push(msg)
}
/*作下面這些merge的目的由於不一樣平臺能夠提供本身自己平臺的一個baseOptions,內部封裝了平臺本身的實現,而後把共同的部分抽離開來放在這層compiler中,因此在這裏須要merge一下*/
if (options) {
// merge custom modules
/*合併modules*/
if (options.modules) {
finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
}
// merge custom directives
if (options.directives) {
/*合併directives*/
finalOptions.directives = extend(
Object.create(baseOptions.directives),
options.directives
)
}
// copy other options
for (const key in options) {
/*合併其他的options,modules與directives已經在上面作了特殊處理了*/
if (key !== 'modules' && key !== 'directives') {
finalOptions[key] = options[key]
}
}
}
/*基礎模板編譯,獲得編譯結果*/
const compiled = baseCompile(template, finalOptions)
if (process.env.NODE_ENV !== 'production') {
errors.push.apply(errors, detectErrors(compiled.ast))
}
compiled.errors = errors
compiled.tips = tips
return compiled
}
compile主要作了兩件事,一件是合併option(前面說的將平臺自有的option與傳入的option進行合併),另外一件是baseCompile,進行模板template的編譯。
來看一下baseCompile
function baseCompile ( template: string, options: CompilerOptions ): CompiledResult {
/*parse解析獲得ast樹*/
const ast = parse(template.trim(), options)
/* 將AST樹進行優化 優化的目標:生成模板AST樹,檢測不須要進行DOM改變的靜態子樹。 一旦檢測到這些靜態樹,咱們就能作如下這些事情: 1.把它們變成常數,這樣咱們就不再須要每次從新渲染時建立新的節點了。 2.在patch的過程當中直接跳過。 */
optimize(ast, options)
/*根據ast樹生成所需的code(內部包含render與staticRenderFns)*/
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
}
baseCompile首先會將模板template進行parse獲得一個AST語法樹,再經過optimize作一些優化,最後經過generate獲得render以及staticRenderFns。
parse的源碼能夠參見https://github.com/answershuto/learnVue/blob/master/vue-src/compiler/parser/index.js#L53。
parse會用正則等方式解析template模板中的指令、class、style等數據,造成AST語法樹。
optimize的主要做用是標記static靜態節點,這是Vue在編譯過程當中的一處優化,後面當update更新界面時,會有一個patch的過程,diff算法會直接跳過靜態節點,從而減小了比較的過程,優化了patch的性能。
generate是將AST語法樹轉化成render funtion字符串的過程,獲得結果是render的字符串以及staticRenderFns字符串。
至此,咱們的template模板已經被轉化成了咱們所需的AST語法樹、render function字符串以及staticRenderFns字符串。
來看一下這段代碼的編譯結果
<div class="main" :class="bindClass">
<div>{{text}}</div>
<div>hello world</div>
<div v-for="(item, index) in arr">
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<p>{{index}}</p>
<p>---</p>
</div>
<div v-if="text">
{{text}}
</div>
<div v-else></div>
</div>
轉化後獲得AST樹,以下圖:
咱們能夠看到最外層的div是這顆AST樹的根節點,節點上有許多數據表明這個節點的形態,好比static表示是不是靜態節點,staticClass表示靜態class屬性(非bind:class)。children表明該節點的子節點,能夠看到children是一個長度爲4的數組,裏面包含的是該節點下的四個div子節點。children裏面的節點與父節點的結構相似,層層往下造成一棵AST語法樹。
再來看看由AST獲得的render函數
with(this){
return _c( 'div',
{
/*static class*/
staticClass:"main",
/*bind class*/
class:bindClass
},
[
_c( 'div', [_v(_s(text))]),
_c('div',[_v("hello world")]),
/*這是一個v-for循環*/
_l(
(arr),
function(item,index){
return _c( 'div',
[_c('p',[_v(_s(item.name))]),
_c('p',[_v(_s(item.value))]),
_c('p',[_v(_s(index))]),
_c('p',[_v("---")])]
)
}
),
/*這是v-if*/
(text)?_c('div',[_v(_s(text))]):_c('div',[_v("no text")])],
2
)
}
看了render function字符串,發現有大量的_c,_v,_s,_q,這些函數到底是什麼?
帶着問題,咱們來看一下core/instance/render。
/*處理v-once的渲染函數*/
Vue.prototype._o = markOnce
/*將字符串轉化爲數字,若是轉換失敗會返回原字符串*/
Vue.prototype._n = toNumber
/*將val轉化成字符串*/
Vue.prototype._s = toString
/*處理v-for列表渲染*/
Vue.prototype._l = renderList
/*處理slot的渲染*/
Vue.prototype._t = renderSlot
/*檢測兩個變量是否相等*/
Vue.prototype._q = looseEqual
/*檢測arr數組中是否包含與val變量相等的項*/
Vue.prototype._i = looseIndexOf
/*處理static樹的渲染*/
Vue.prototype._m = renderStatic
/*處理filters*/
Vue.prototype._f = resolveFilter
/*從config配置中檢查eventKeyCode是否存在*/
Vue.prototype._k = checkKeyCodes
/*合併v-bind指令到VNode中*/
Vue.prototype._b = bindObjectProps
/*建立一個文本節點*/
Vue.prototype._v = createTextVNode
/*建立一個空VNode節點*/
Vue.prototype._e = createEmptyVNode
/*處理ScopedSlots*/
Vue.prototype._u = resolveScopedSlots
/*建立VNode節點*/
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
經過這些函數,render函數最後會返回一個VNode節點,在_update的時候,通過patch與以前的VNode節點進行比較,得出差別後將這些差別渲染到真實的DOM上。
做者:染陌
Email:answershuto@gmail.com or answershuto@126.com
Github: https://github.com/answershuto
Blog:http://answershuto.github.io/
知乎主頁:https://www.zhihu.com/people/cao-yang-49/activities
知乎專欄:https://zhuanlan.zhihu.com/ranmo
掘金: https://juejin.im/user/58f87ae844d9040069ca7507
osChina:https://my.oschina.net/u/3161824/blog
轉載請註明出處,謝謝。
歡迎關注個人公衆號