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 ， 。*/
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)
}
약간의 기초
우선,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
}
}
createCompiler
createCompiler 는 컴 파일 러 를 만 드 는 데 사용 되 며,반환 값 은 copile 및 copileToFunctions 입 니 다.copile 은 들 어 오 는 template 를 대응 하 는 AST 트 리,render 함수,staticRenderfns 함수 로 변환 하 는 컴 파일 러 입 니 다.한편,copile ToFunctions 는 캐 시 를 가 진 컴 파일 러 이 며,static RenderFns 와 render 함수 가 Funtion 대상 으로 변 환 됩 니 다.
서로 다른 플랫폼 에 서로 다른 options 가 있 기 때문에 createCompiler 는 플랫폼 에 따라 baseOptions 를 구분 하여 들 어 옵 니 다.copile 자체 가 들 어 오 는 options 와 합 쳐 최종 final Options 를 얻 을 수 있 습 니 다.
compileToFunctions
우선 copile ToFunctions 코드 를 붙 여 주세요.
/* ， 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:
${template}
` +
compiled.errors.map(e => `- ${e}`).join('
') + '
',
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:
` +
fnGenErrors.map(({ err, code }) => `${err.toString()} in
$[code]
`).join('
'),
vm
)
}
}
/* ， */
return (functionCompileCache[key] = res)
}
/* ， */
const functionCompileCache: {
[key: string]: CompiledFunctionResult;
} = Object.create(null)
// check cache
/* */
const key = options.delimiters
? String(options.delimiters) + template
: template
if (functionCompileCache[key]) {
return functionCompileCache[key]
}
/* ， */
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
}
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
}
}
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 문자열 로 바 뀌 었 다.
예 를 들다
이 코드 의 컴 파일 결 과 를 보 겠 습 니 다.
<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>
우 리 는 가장 바깥쪽 의 div 가 이 AST 트 리 의 뿌리 노드 임 을 볼 수 있 습 니 다.노드 에 많은 데이터 가 이 노드 의 형 태 를 대표 합 니 다.예 를 들 어 static 은 정적 노드 인지,staticClass 는 정적 class 속성(비 bid: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)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
