vue2從template到render模板編譯入口詳解

第vue2從template到render模板編譯入口詳解目錄正文1、template：模板獲取2、createCompiler：核心參數(shù)3、createCompileToFunctionFn：緩存處理4、compile:參數(shù)合并小結(jié)

正文

在vue的渲染過程中，渲染核心邏輯是vm._update(vm._render(),hydrating)，通過vm._render的執(zhí)行獲取到vNode，再通過vm._update的執(zhí)行來將vNode渲染成真實(shí)視圖。

其中，render函數(shù)的來源是：

（1）用戶手寫；

（2）通過vue-loader引入的時(shí)候進(jìn)行轉(zhuǎn)換；

（3）通過compileToFunctions將template進(jìn)行處理產(chǎn)生。

開發(fā)過程中主要以template的方式進(jìn)行代碼的編寫，這里主要梳理compileToFunctions的方法。

1、template：模板獲取

在src/platforms/web/entry-runtime-with-compiler.js中在vue的原型上定義了$mount：

constidToTemplate=cached(id={

constel=query(id)

returnelel.innerHTML

constmount=Vtotype.$mount

Vtotype.$mount=function(

el:string|Element,

hydrating:boolean

):Component{

el=elquery(el)

/*istanbulignoreif*/

if(el===document.body||el===document.documentElement){

process.env.NODE_ENV!=='production'warn(

`DonotmountVuetohtmlorbody-mounttonormalelementsinstead.`

returnthis

constoptions=this.$options

//resolvetemplate/elandconverttorenderfunction

if(!options.render){

lettemplate=options.template

if(template){

if(typeoftemplate==='string'){

if(template.charAt(0)==='#'){

template=idToTemplate(template)

/*istanbulignoreif*/

if(process.env.NODE_ENV!=='production'!template){

warn(

`Templateelementnotfoundorisempty:${options.template}`,

this

}elseif(template.nodeType){

template=template.innerHTML

}else{

if(process.env.NODE_ENV!=='production'){

warn('invalidtemplateoption:'+template,this)

returnthis

}elseif(el){

template=getOuterHTML(el)

if(template){

/*istanbulignoreif*/

if(process.env.NODE_ENV!=='production'config.performancemark){

mark('compile')

const{render,staticRenderFns}=compileToFunctions(template,{

outputSourceRange:process.env.NODE_ENV!=='production',

shouldDecodeNewlines,

shouldDecodeNewlinesForHref,

delimiters:options.delimiters,

comments:ments

},this)

options.render=render

options.staticRenderFns=staticRenderFns

/*istanbulignoreif*/

if(process.env.NODE_ENV!=='production'config.performancemark){

mark('compileend')

measure(`vue${this._name}compile`,'compile','compileend')

returnmount.call(this,el,hydrating)

*GetouterHTMLofelements,takingcare

*ofSVGelementsinIEaswell.

functiongetOuterHTML(el:Element):string{

if(el.outerHTML){

returnel.outerHTML

}else{

constcontainer=document.createElement('div')

container.appendChild(el.cloneNode(true))

returncontainer.innerHTML

在沒有編寫render時(shí)候才會(huì)去獲取template并進(jìn)行編譯，獲取方式有

在傳入的參數(shù)中獲取options.template如果是真實(shí)節(jié)點(diǎn)則獲取其innerHTML以上都不滿足則通過或者el.outerhTML的方式獲取

獲取到template后通過compileToFunctions的方式進(jìn)行編譯，這里是編譯的入口。

2、createCompiler：核心參數(shù)

在src/platforms/web/compile/index.js中調(diào)用了createCompiler：

import{baseOptions}from'./options'

import{createCompiler}from'compiler/index'

const{compile,compileToFunctions}=createCompiler(baseOptions)

export{compile,compileToFunctions}

這里將baseOptions作為基礎(chǔ)參數(shù)傳入，在src/complile/index.js中定義了createCompiler：

import{parse}from'./parser/index'

import{optimize}from'./optimizer'

import{generate}from'./codegen/index'

import{createCompilerCreator}from'./create-compiler'

exportconstcreateCompiler=createCompilerCreator(functionbaseCompile(

template:string,

options:CompilerOptions

):CompiledResult{

constast=parse(template.trim(),options)

if(options.optimize!==false){

optimize(ast,options)

constcode=generate(ast,options)

return{

ast,

render:code.render,

staticRenderFns:code.staticRenderFns

這里定義了baseCompile核心參數(shù)，主要目的是進(jìn)行ast的獲取、ast的優(yōu)化和code的拼接。并將baseCompile作為參數(shù)傳入執(zhí)行了createCompilerCreator：

exportfunctioncreateCompilerCreator(baseCompile:Function):Function{

returnfunctioncreateCompiler(baseOptions:CompilerOptions){

functioncompile(

template:string,

options:CompilerOptions

):CompiledResult{

//...

return{

compile,

compileToFunctions:createCompileToFunctionFn(compile)

createCompiler就是createCompilerCreator的返回函數(shù)，createCompiler中返回了compile和compileToFunctions，這里的compileToFunctions就是入口獲取render的函數(shù)，由createCompileToFunctionFn(compile)執(zhí)行獲得。

再看createCompileToFunctionFn(compile)：

3、createCompileToFunctionFn：緩存處理

functioncreateFunction(code,errors){

try{

returnnewFunction(code)

}catch(err){

errors.push({err,code})

returnnoop

exportfunctioncreateCompileToFunctionFn(compile:Function):Function{

constcache=Object.create(null)

returnfunctioncompileToFunctions(

template:string,

options:CompilerOptions,

vm:Component

):CompiledFunctionResult{

options=extend({},options)

constwarn=options.warn||baseWarn

deleteoptions.warn

/*istanbulignoreif*/

if(process.env.NODE_ENV!=='production'){

//detectpossibleCSPrestriction

try{

newFunction('return1')

}catch(e){

if(e.toString().match(/unsafe-eval|CSP/)){

warn(

'ItseemsyouareusingthestandalonebuildofVue.jsinan'+

'environmentwithContentSecurityPolicythatprohibitsunsafe-eval.'+

'Thetemplatecompilercannotworkinthisenvironment.Consider'+

'relaxingthepolicytoallowunsafe-evalorpre-compilingyour'+

'templatesintorenderfunctions.'

//checkcache

constkey=options.delimiters

String(options.delimiters)+template

:template

if(cache[key]){

returncache[key]

//compile

constcompiled=compile(template,options)

//...

//turncodeintofunctions

constres={}

constfnGenErrors=[]

res.render=createFunction(compiled.render,fnGenErrors)

res.staticRenderFns=compiled.staticRenderFns.map(code={

returncreateFunction(code,fnGenErrors)

//checkfunctiongenerationerrors.

//thisshouldonlyhappenifthereisabuginthecompileritself.

//mostlyforcodegendevelopmentuse

/*istanbulignoreif*/

if(process.env.NODE_ENV!=='production'){

if((!compiled.errors||!compiled.errors.length)fnGenErrors.length){

warn(

`Failedtogeneraterenderfunction:\n\n`+

fnGenErrors.map(({err,code})=`${err.toString()}in\n\n$[code]\n`).join('\n'),

return(cache[key]=res)

這里通過constcache=Object.create(null)的方式定義了緩存，返回的compileToFunctions函數(shù)中執(zhí)行return(cache[key]=res)，通過閉包的方式進(jìn)行了計(jì)算的重復(fù)利用。

如果當(dāng)前環(huán)境支持newFunction(return1)則調(diào)用了createFunction將compiled.render通過newFunction(code)進(jìn)行可執(zhí)行代碼的轉(zhuǎn)換，否則進(jìn)行提示(放寬環(huán)境執(zhí)行或預(yù)編譯當(dāng)前模板)。

再看constcompiled=compile(template,options)：

4、compile:參數(shù)合并

functioncompile(

template:string,

options:CompilerOptions

):CompiledResult{

constfinalOptions=Object.create(baseOptions)

consterrors=[]

consttips=[]

letwarn=(msg,range,tip)={

(tiptips:errors).push(msg)

if(options){

if(process.env.NODE_ENV!=='production'options.outputSourceRange){

//$flow-disable-line

constleadingSpaceLength=template.match(/^\s*/)[0].length

warn=(msg,range,tip)={

constdata:WarningMessage={msg}

if(range){

if(range.start!=null){

data.start=range.start+leadingSpaceLength

if(range.end!=null){

data.end=range.end+leadingSpaceLength

(tiptips:errors).push(data)

//mergecustommodules

if(options.modules){

finalOptions.modules=

(baseOptions.modules||[]).concat(options.modules)

//mergecustomdirectives

if(options.directives){

finalOptions.directives=extend(

Object.create(baseOptions.directives||null),

options.directives

//copyotheroptions

for(constkey