本文主要介紹Vue.js的template編譯的問題,給大家做個參考,希望大家學完本文對Vue.js中template編譯問題就有清楚的解決思路了。
寫在前面
因為對Vue.js很感興趣,而且平常工作的技術堆疊也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,並做了總結與輸出。
文章的原始網址:https://github.com/answershuto/learnVue。
在學習過程中,為Vue加上了中文的註解https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以對其他想學習Vue原始碼的小夥伴有所幫助。
可能會有理解有偏差的地方,歡迎提issue指出,共同學習,共同進步。
$mount
先看一下mount的程式碼
/*把原本不带编译的$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是如何編譯的。
一些基礎
首先,template會被編譯成AST語法樹,那麼AST是什麼?
在電腦科學中,抽象語法樹(abstract syntax tree或縮寫為AST),或文法樹(syntax tree),是原始碼的抽象語法結構的樹狀表現形式,這裡特別指程式語言的原始碼。
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
createCompiler用以建立編譯器,傳回值是compile以及compileToFunctions。 compile是一個編譯器,它會將傳入的template轉換成對應的AST樹、render函數、staticRenderFns函數。而compileToFunctions則是帶有快取的編譯器,同時staticRenderFns以及render函數會轉換成Funtion物件。
因為不同平台有一些不同的options,所以createCompiler會根據平台區分傳入一個baseOptions,會與compile本身傳入的options合併得到最終的finalOptions。
compileToFunctions
首先還是貼上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)
compile
/*编译,将模板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
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
parse的原始碼可以參考https://github.com/answershuto/learnVue/blob/master/vue-src/compiler/parser/index.js#L53。
parse會用正規等方式解析template模板中的指令、class、style等數據,形成AST語法樹。
optimize
optimize的主要功能是標記static靜態節點,這是Vue在編譯過程中的最佳化,後面當update更新介面時,會有一個patch的過程,diff演算法會直接跳過靜態節點,從而減少了比較的過程,優化了patch的效能。
generate
generate是將AST語法樹轉換成render funtion字串的過程,得到結果是render的字串以及staticRenderFns字串。
至此,我們的template模板已經被轉換成了我們所需的AST語法樹、render function字串以及staticRenderFns字串。
舉例
來看這段程式碼的編譯結果
<p class="main" :class="bindClass"> <p>{{text}}</p> <p>hello world</p> <p v-for="(item, index) in arr"> <p>{{item.name}}</p> <p>{{item.value}}</p> <p>{{index}}</p> <p>---</p> </p> <p v-if="text"> {{text}} </p> <p v-else></p> </p>
轉換後得到AST樹,如下圖:
我們可以看到最外層的p是這顆AST樹的根節點,節點上有許多資料代表這個節點的形態,例如static表示是否是靜態節點,staticClass表示class屬性(非bind:class)。 children代表該節點的子節點,可以看到children是一個長度為4的數組,裡麵包含的是該節點下的四個p子節點。 children裡面的節點與父節點的結構類似,層層往下形成一棵AST語法樹。
再來看看由AST得到的render函數
with(this){ return _c( 'p', { /*static class*/ staticClass:"main", /*bind class*/ class:bindClass }, [ _c( 'p', [_v(_s(text))]), _c('p',[_v("hello world")]), /*这是一个v-for循环*/ _l( (arr), function(item,index){ return _c( 'p', [_c('p',[_v(_s(item.name))]), _c('p',[_v(_s(item.value))]), _c('p',[_v(_s(index))]), _c('p',[_v("---")])] ) } ), /*这是v-if*/ (text)?_c('p',[_v(_s(text))]):_c('p',[_v("no text")])], 2 ) }
_c,_v,_s,_q
看了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上。
相关推荐:
以上是Vue.js中template編譯問題如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!