Vue源码分析

warn

extend

mergeOptions

defineReactive

directives

components

filters

_base:Vue

return this._data

return this._props

经过编译添加render

template是html的模版

template写的是#id

template写的是获取好的某个节点：document.querySelector

const {render, staticRenderFns} = <font color="#b71c1c">compileToFunctions</font>(template,options)

const {compile, <font color="#b71c1c">compileToFunctions</font>}=<font color="#b71c1c" style="">createCompiler</font>(baseOptions)

<font face="黑体" style="" color="#b71c1c">createCompiler</font> = <font color="#b71c1c">createCompilerCreator</font>(<font color="#000000">function baseCompile(template,options){}</font>)

function <font color="#b71c1c">createCompilerCreator</font>(<font color="#000000">baseCompile</font>){<br>&nbsp; return function <font color="#b71c1c">createCompiler</font>(baseOptions){<br>&nbsp; &nbsp; &nbsp; function <font color="#000000">compile</font>(template,options){<br>&nbsp; &nbsp; &nbsp; &nbsp; <font color="#000000">// 合并options</font><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const finalOptions = Object.create(baseOptions)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;finalOptions.modules = baseOptions.modules.concat(options.modules)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;finalOptions.directives = extend(Object.create(baseOptions.directives, options.directives))<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(const key in options){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key !== 'modules' &amp;&amp; key !== "directives" &amp;&amp; (finalOptions[key]=options[key])<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const compiled = <font color="#000000">baseCompile</font>(template.trim(),finalOptions)<br>&nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; return {<font color="#000000">compile</font>, <font color="#000000">compileToFunctions</font>: <font color="#000000">createCompileToFunctionFn</font>(<font color="#000000">compile</font>)}<br>&nbsp; }<br>}<br>

function <font color="#000000">createCompileToFunctionFn</font>(<font color="#b71c1c">compile</font>){<br>&nbsp; return function <font color="#000000">compileToFunctions</font>(template,options,vm){<br>&nbsp; &nbsp; &nbsp; const&nbsp; compiled = <font color="#000000" style="">compile</font>(template,options)<br>&nbsp; &nbsp; &nbsp; return compiled<br>&nbsp; }<br>}

expectHTML:true

modules

directives

isPreTag

isUnaryTag

mustUseProp

canBeLeftOpenTag

isReservedTag

getTagNamespace

staticKeys:genStaticKeys(modules)

parse

optimize

generate