When learning becomes a habit, knowledge becomes common sense. Thank you for your attention , likes , favorites and comments .
New videos and articles will be sent on the WeChat public account as soon as possible, welcome to follow: Li Yongning lyn
The article has been included in the github repository liyongning/blog . Welcome to Watch and Star.
cover
foreword
This article is the last part of the Vue compiler. The first two parts are: Vue source code interpretation (8) - compiler analysis , Vue source code interpretation (9) - compiler optimization .
Starting from the HTML template string, parse all tags and various attributes on the tags to obtain the AST syntax tree, and then perform static marking based on the AST syntax tree. First, mark whether each node is static and static, and then further mark the static root node. In this way, the update of these static root nodes can be skipped in subsequent updates, thereby improving performance.
This last part talks about how to generate render functions from the AST.
Target
In-depth understanding of the rendering function generation process, understand how the compiler turns AST into runtime code, that is, what does the html-like template we write finally become?
Source code interpretation
Entrance
/src/compiler/index.js
/**
* 在这之前做的所有的事情，只有一个目的，就是为了构建平台特有的编译选项（options），比如 web 平台
*
* 1、将 html 模版解析成 ast
* 2、对 ast 树进行静态标记
* 3、将 ast 生成渲染函数
* 静态渲染函数放到 code.staticRenderFns 数组中
* code.render 为动态渲染函数
* 在将来渲染时执行渲染函数得到 vnode
*/
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 将模版解析为 AST，每个节点的 ast 对象上都设置了元素的所有信息，比如，标签信息、属性信息、插槽信息、父节点、子节点等。
// 具体有那些属性，查看 options.start 和 options.end 这两个处理开始和结束标签的方法
const ast = parse(template.trim(), options)
// 优化，遍历 AST，为每个节点做静态标记
// 标记每个节点是否为静态节点，然后进一步标记出静态根节点
// 这样在后续更新中就可以跳过这些静态节点了
// 标记静态根，用于生成渲染函数阶段，生成静态根节点的渲染函数
if (options.optimize !== false) {
optimize(ast, options)
}
// 代码生成，将 ast 转换成可执行的 render 函数的字符串形式
// code = {
// render: `with(this){return ${_c(tag, data, children, normalizationType)}}`,
// staticRenderFns: [_c(tag, data, children, normalizationType), ...]
// }
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})
generate
/src/compiler/codegen/index.js
/**
* 从 AST 生成渲染函数
* @returns {
* render: `with(this){return _c(tag, data, children)}`,
* staticRenderFns: state.staticRenderFns
* }
*/
export function generate(
ast: ASTElement | void,
options: CompilerOptions
): CodegenResult {
// 实例化 CodegenState 对象，生成代码的时候需要用到其中的一些东西
const state = new CodegenState(options)
// 生成字符串格式的代码，比如：'_c(tag, data, children, normalizationType)'
// data 为节点上的属性组成 JSON 字符串，比如 '{ key: xx, ref: xx, ... }'
// children 为所有子节点的字符串格式的代码组成的字符串数组，格式：
// `['_c(tag, data, children)', ...],normalizationType`，
// 最后的 normalization 是 _c 的第四个参数，
// 表示节点的规范化类型，不是重点，不需要关注
// 当然 code 并不一定就是 _c，也有可能是其它的，比如整个组件都是静态的，则结果就为 _m(0)
const code = ast ? genElement(ast, state) : '_c("div")'
return {
render: `with(this){return ${code}}`,
staticRenderFns: state.staticRenderFns
}
}
genElement
/src/compiler/codegen/index.js
Reading suggestions :
First read the statement part of the code generated by the last else module, that is, the else branch that handles custom components and native tags, to understand what the final generated data format is; then go back and read
genChildrenandgenData, read firstgenChildren, the amount of code is small, and a thorough understanding The final generated data structure, and finally read other branches from top to bottom.When reading the following code, please interpret the Vue source code (8) - the analysis of the compiler (below) and put the AST object obtained at the end to assist reading, because the process of generating the rendering function is the process of processing many attributes on the object .
export function genElement(el: ASTElement, state: CodegenState): string {
if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
/**
* 处理静态根节点，生成节点的渲染函数
* 1、将当前静态节点的渲染函数放到 staticRenderFns 数组中
* 2、返回一个可执行函数 _m(idx, true or '')
*/
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
/**
* 处理带有 v-once 指令的节点，结果会有三种：
* 1、当前节点存在 v-if 指令，得到一个三元表达式，condition ? render1 : render2
* 2、当前节点是一个包含在 v-for 指令内部的静态节点，得到 `_o(_c(tag, data, children), number, key)`
* 3、当前节点就是一个单纯的 v-once 节点，得到 `_m(idx, true of '')`
*/
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
/**
* 处理节点上的 v-for 指令
* 得到 `_l(exp, function(alias, iterator1, iterator2){return _c(tag, data, children)})`
*/
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
/**
* 处理带有 v-if 指令的节点，最终得到一个三元表达式：condition ? render1 : render2
*/
return genIf(el, state)
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
/**
* 当前节点不是 template 标签也不是插槽和带有 v-pre 指令的节点时走这里
* 生成所有子节点的渲染函数，返回一个数组，格式如：
* [_c(tag, data, children, normalizationType), ...]
*/
return genChildren(el, state) || 'void 0'
} else if (el.tag === 'slot') {
/**
* 生成插槽的渲染函数，得到
* _t(slotName, children, attrs, bind)
*/
return genSlot(el, state)
} else {
// component or element
// 处理动态组件和普通元素（自定义组件、原生标签）
let code
if (el.component) {
/**
* 处理动态组件，生成动态组件的渲染函数
* 得到 `_c(compName, data, children)`
*/
code = genComponent(el.component, el, state)
} else {
// 自定义组件和原生标签走这里
let data
if (!el.plain || (el.pre && state.maybeComponent(el))) {
// 非普通元素或者带有 v-pre 指令的组件走这里，处理节点的所有属性，返回一个 JSON 字符串，
// 比如 '{ key: xx, ref: xx, ... }'
data = genData(el, state)
}
// 处理子节点，得到所有子节点字符串格式的代码组成的数组，格式：
// `['_c(tag, data, children)', ...],normalizationType`，
// 最后的 normalization 表示节点的规范化类型，不是重点，不需要关注
const children = el.inlineTemplate ? null : genChildren(el, state, true)
// 得到最终的字符串格式的代码，格式：
// '_c(tag, data, children, normalizationType)'
code = `_c('${el.tag}'${data ? `,${data}` : '' // data
}${children ? `,${children}` : '' // children
})`
}
// 如果提供了 transformCode 方法，
// 则最终的 code 会经过各个模块（module）的该方法处理，
// 不过框架没提供这个方法，不过即使处理了，最终的格式也是 _c(tag, data, children)
// module transforms
for (let i = 0; i < state.transforms.length; i++) {
code = state.transforms[i](el, code)
}
return code
}
}
genChildren
/src/compiler/codegen/index.js
/**
* 生成所有子节点的渲染函数，返回一个数组，格式如：
* [_c(tag, data, children, normalizationType), ...]
*/
export function genChildren(
el: ASTElement,
state: CodegenState,
checkSkip?: boolean,
altGenElement?: Function,
altGenNode?: Function
): string | void {
// 所有子节点
const children = el.children
if (children.length) {
// 第一个子节点
const el: any = children[0]
// optimize single v-for
if (children.length === 1 &&
el.for &&
el.tag !== 'template' &&
el.tag !== 'slot'
) {
// 优化，只有一个子节点 && 子节点的上有 v-for 指令 && 子节点的标签不为 template 或者 slot
// 优化的方式是直接调用 genElement 生成该节点的渲染函数，不需要走下面的循环然后调用 genCode 最后得到渲染函数
const normalizationType = checkSkip
? state.maybeComponent(el) ? `,1` : `,0`
: ``
return `${(altGenElement || genElement)(el, state)}${normalizationType}`
}
// 获取节点规范化类型，返回一个 number 0、1、2，不是重点， 不重要
const normalizationType = checkSkip
? getNormalizationType(children, state.maybeComponent)
: 0
// 函数，生成代码的一个函数
const gen = altGenNode || genNode
// 返回一个数组，数组的每个元素都是一个子节点的渲染函数，
// 格式：['_c(tag, data, children, normalizationType)', ...]
return `[${children.map(c => gen(c, state)).join(',')}]${normalizationType ? `,${normalizationType}` : ''
}`
}
}
genNode
/src/compiler/codegen/index.js
function genNode(node: ASTNode, state: CodegenState): string {
if (node.type === 1) {
return genElement(node, state)
} else if (node.type === 3 && node.isComment) {
return genComment(node)
} else {
return genText(node)
}
}
genText
/src/compiler/codegen/index.js
export function genText(text: ASTText | ASTExpression): string {
return `_v(${text.type === 2
? text.expression // no need for () because already wrapped in _s()
: transformSpecialNewlines(JSON.stringify(text.text))
})`
}
genComment
/src/compiler/codegen/index.js
export function genComment(comment: ASTText): string {
return `_e(${JSON.stringify(comment.text)})`
}
genData
/src/compiler/codegen/index.js
/**
* 处理节点上的众多属性，最后生成这些属性组成的 JSON 字符串，比如 data = { key: xx, ref: xx, ... }
*/
export function genData(el: ASTElement, state: CodegenState): string {
// 节点的属性组成的 JSON 字符串
let data = '{'
// 首先先处理指令，因为指令可能在生成其它属性之前改变这些属性
// 执行指令编译方法，比如 web 平台的 v-text、v-html、v-model，然后在 el 对象上添加相应的属性，
// 比如 v-text： el.textContent = _s(value, dir)
// v-html：el.innerHTML = _s(value, dir)
// 当指令在运行时还有任务时，比如 v-model，则返回 directives: [{ name, rawName, value, arg, modifiers }, ...}]
// directives first.
// directives may mutate the el's other properties before they are generated.
const dirs = genDirectives(el, state)
if (dirs) data += dirs + ','
// key，data = { key: xx }
if (el.key) {
data += `key:${el.key},`
}
// ref，data = { ref: xx }
if (el.ref) {
data += `ref:${el.ref},`
}
// 带有 ref 属性的节点在带有 v-for 指令的节点的内部， data = { refInFor: true }
if (el.refInFor) {
data += `refInFor:true,`
}
// pre，v-pre 指令，data = { pre: true }
if (el.pre) {
data += `pre:true,`
}
// 动态组件，data = { tag: 'component' }
// record original tag name for components using "is" attribute
if (el.component) {
data += `tag:"${el.tag}",`
}
// 为节点执行模块(class、style)的 genData 方法，
// 得到 data = { staticClass: xx, class: xx, staticStyle: xx, style: xx }
// module data generation functions
for (let i = 0; i < state.dataGenFns.length; i++) {
data += state.dataGenFns[i](el)
}
// 其它属性，得到 data = { attrs: 静态属性字符串 } 或者
// data = { attrs: '_d(静态属性字符串, 动态属性字符串)' }
// attributes
if (el.attrs) {
data += `attrs:${genProps(el.attrs)},`
}
// DOM props，结果同 el.attrs
if (el.props) {
data += `domProps:${genProps(el.props)},`
}
// 自定义事件，data = { `on${eventName}:handleCode` } 或者 { `on_d(${eventName}:handleCode`, `${eventName},handleCode`) }
// event handlers
if (el.events) {
data += `${genHandlers(el.events, false)},`
}
// 带 .native 修饰符的事件，
// data = { `nativeOn${eventName}:handleCode` } 或者 { `nativeOn_d(${eventName}:handleCode`, `${eventName},handleCode`) }
if (el.nativeEvents) {
data += `${genHandlers(el.nativeEvents, true)},`
}
// 非作用域插槽，得到 data = { slot: slotName }
// slot target
// only for non-scoped slots
if (el.slotTarget && !el.slotScope) {
data += `slot:${el.slotTarget},`
}
// scoped slots，作用域插槽，data = { scopedSlots: '_u(xxx)' }
if (el.scopedSlots) {
data += `${genScopedSlots(el, el.scopedSlots, state)},`
}
// 处理 v-model 属性，得到
// data = { model: { value, callback, expression } }
// component v-model
if (el.model) {
data += `model:{value:${el.model.value
},callback:${el.model.callback
},expression:${el.model.expression
}},`
}
// inline-template，处理内联模版，得到
// data = { inlineTemplate: { render: function() { render 函数 }, staticRenderFns: [ function() {}, ... ] } }
if (el.inlineTemplate) {
const inlineTemplate = genInlineTemplate(el, state)
if (inlineTemplate) {
data += `${inlineTemplate},`
}
}
// 删掉 JSON 字符串最后的 逗号，然后加上闭合括号 }
data = data.replace(/,$/, '') + '}'
// v-bind dynamic argument wrap
// v-bind with dynamic arguments must be applied using the same v-bind object
// merge helper so that class/style/mustUseProp attrs are handled correctly.
if (el.dynamicAttrs) {
// 存在动态属性，data = `_b(data, tag, 静态属性字符串或者_d(静态属性字符串, 动态属性字符串))`
data = `_b(${data},"${el.tag}",${genProps(el.dynamicAttrs)})`
}
// v-bind data wrap
if (el.wrapData) {
data = el.wrapData(data)
}
// v-on data wrap
if (el.wrapListeners) {
data = el.wrapListeners(data)
}
return data
}
genDirectives
/src/compiler/codegen/index.js
Reading suggestion : This part of the content can also be read behind other methods. For example, if you want to delve into the implementation principle of v-model
/**
* 运行指令的编译方法，如果指令存在运行时任务，则返回 directives: [{ name, rawName, value, arg, modifiers }, ...}]
*/
function genDirectives(el: ASTElement, state: CodegenState): string | void {
// 获取指令数组
const dirs = el.directives
// 没有指令则直接结束
if (!dirs) return
// 指令的处理结果
let res = 'directives:['
// 标记，用于标记指令是否需要在运行时完成的任务，比如 v-model 的 input 事件
let hasRuntime = false
let i, l, dir, needRuntime
// 遍历指令数组
for (i = 0, l = dirs.length; i < l; i++) {
dir = dirs[i]
needRuntime = true
// 获取节点当前指令的处理方法，比如 web 平台的 v-html、v-text、v-model
const gen: DirectiveFunction = state.directives[dir.name]
if (gen) {
// 执行指令的编译方法，如果指令还需要运行时完成一部分任务，则返回 true，比如 v-model
// compile-time directive that manipulates AST.
// returns true if it also needs a runtime counterpart.
needRuntime = !!gen(el, dir, state.warn)
}
if (needRuntime) {
// 表示该指令在运行时还有任务
hasRuntime = true
// res = directives:[{ name, rawName, value, arg, modifiers }, ...]
res += `{name:"${dir.name}",rawName:"${dir.rawName}"${dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
}${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''
}${dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
}},`
}
}
if (hasRuntime) {
// 也就是说，只有指令存在运行时任务时，才会返回 res
return res.slice(0, -1) + ']'
}
}
genProps
/src/compiler/codegen/index.js
/**
* 遍历属性数组 props，得到所有属性组成的字符串
* 如果不存在动态属性，则返回：
* 'attrName,attrVal,...'
* 如果存在动态属性，则返回：
* '_d(静态属性字符串, 动态属性字符串)'
*/
function genProps(props: Array<ASTAttr>): string {
// 静态属性
let staticProps = ``
// 动态属性
let dynamicProps = ``
// 遍历属性数组
for (let i = 0; i < props.length; i++) {
// 属性
const prop = props[i]
// 属性值
const value = __WEEX__
? generateValue(prop.value)
: transformSpecialNewlines(prop.value)
if (prop.dynamic) {
// 动态属性，`dAttrName,dAttrVal,...`
dynamicProps += `${prop.name},${value},`
} else {
// 静态属性，'attrName,attrVal,...'
staticProps += `"${prop.name}":${value},`
}
}
// 去掉静态属性最后的逗号
staticProps = `{${staticProps.slice(0, -1)}}`
if (dynamicProps) {
// 如果存在动态属性则返回：
// _d(静态属性字符串，动态属性字符串)
return `_d(${staticProps},[${dynamicProps.slice(0, -1)}])`
} else {
// 说明属性数组中不存在动态属性，直接返回静态属性字符串
return staticProps
}
}
genHandlers
/src/compiler/codegen/events.js
/**
* 生成自定义事件的代码
* 动态：'nativeOn|on_d(staticHandlers, [dynamicHandlers])'
* 静态：`nativeOn|on${staticHandlers}`
*/
export function genHandlers (
events: ASTElementHandlers,
isNative: boolean
): string {
// 原生：nativeOn，否则为 on
const prefix = isNative ? 'nativeOn:' : 'on:'
// 静态
let staticHandlers = ``
// 动态
let dynamicHandlers = ``
// 遍历 events 数组
// events = [{ name: { value: 回调函数名, ... } }]
for (const name in events) {
// 获取指定事件的回调函数名，即 this.methodName 或者 [this.methodName1, ...]
const handlerCode = genHandler(events[name])
if (events[name] && events[name].dynamic) {
// 动态，dynamicHandles = `eventName,handleCode,...,`
dynamicHandlers += `${name},${handlerCode},`
} else {
// 静态，staticHandles = `"eventName":handleCode,`
staticHandlers += `"${name}":${handlerCode},`
}
}
// 去掉末尾的逗号
staticHandlers = `{${staticHandlers.slice(0, -1)}}`
if (dynamicHandlers) {
// 动态，on_d(statickHandles, [dynamicHandlers])
return prefix + `_d(${staticHandlers},[${dynamicHandlers.slice(0, -1)}])`
} else {
// 静态，`on${staticHandlers}`
return prefix + staticHandlers
}
}
genStatic
/src/compiler/codegen/index.js
/**
* 生成静态节点的渲染函数
* 1、将当前静态节点的渲染函数放到 staticRenderFns 数组中
* 2、返回一个可执行函数 _m(idx, true or '')
*/
// hoist static sub-trees out
function genStatic(el: ASTElement, state: CodegenState): string {
// 标记当前静态节点已经被处理过了
el.staticProcessed = true
// Some elements (templates) need to behave differently inside of a v-pre
// node. All pre nodes are static roots, so we can use this as a location to
// wrap a state change and reset it upon exiting the pre node.
const originalPreState = state.pre
if (el.pre) {
state.pre = el.pre
}
// 将静态根节点的渲染函数 push 到 staticRenderFns 数组中，比如：
// [`with(this){return _c(tag, data, children)}`]
state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
state.pre = originalPreState
// 返回一个可执行函数：_m(idx, true or '')
// idx = 当前静态节点的渲染函数在 staticRenderFns 数组中下标
return `_m(${state.staticRenderFns.length - 1
}${el.staticInFor ? ',true' : ''
})`
}
genOnce
/src/compiler/codegen/index.js
/**
* 处理带有 v-once 指令的节点，结果会有三种：
* 1、当前节点存在 v-if 指令，得到一个三元表达式，condition ? render1 : render2
* 2、当前节点是一个包含在 v-for 指令内部的静态节点，得到 `_o(_c(tag, data, children), number, key)`
* 3、当前节点就是一个单纯的 v-once 节点，得到 `_m(idx, true of '')`
*/
function genOnce(el: ASTElement, state: CodegenState): string {
// 标记当前节点的 v-once 指令已经被处理过了
el.onceProcessed = true
if (el.if && !el.ifProcessed) {
// 如果含有 v-if 指令 && if 指令没有被处理过，则走这里
// 处理带有 v-if 指令的节点，最终得到一个三元表达式，condition ? render1 : render2
return genIf(el, state)
} else if (el.staticInFor) {
// 说明当前节点是被包裹在还有 v-for 指令节点内部的静态节点
// 获取 v-for 指令的 key
let key = ''
let parent = el.parent
while (parent) {
if (parent.for) {
key = parent.key
break
}
parent = parent.parent
}
// key 不存在则给出提示，v-once 节点只能用于带有 key 的 v-for 节点内部
if (!key) {
process.env.NODE_ENV !== 'production' && state.warn(
`v-once can only be used inside v-for that is keyed. `,
el.rawAttrsMap['v-once']
)
return genElement(el, state)
}
// 生成 `_o(_c(tag, data, children), number, key)`
return `_o(${genElement(el, state)},${state.onceId++},${key})`
} else {
// 上面几种情况都不符合，说明就是一个简单的静态节点，和处理静态根节点时的操作一样,
// 得到 _m(idx, true or '')
return genStatic(el, state)
}
}
genFor
/src/compiler/codegen/index.js
/**
* 处理节点上的 v-for 指令
* 得到 `_l(exp, function(alias, iterator1, iterator2){return _c(tag, data, children)})`
*/
export function genFor(
el: any,
state: CodegenState,
altGen?: Function,
altHelper?: string
): string {
// v-for 的迭代器，比如 一个数组
const exp = el.for
// 迭代时的别名
const alias = el.alias
// iterator 为 v-for = "(item ,idx) in obj" 时会有，比如 iterator1 = idx
const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''
// 提示，v-for 指令在组件上时必须使用 key
if (process.env.NODE_ENV !== 'production' &&
state.maybeComponent(el) &&
el.tag !== 'slot' &&
el.tag !== 'template' &&
!el.key
) {
state.warn(
`<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
`v-for should have explicit keys. ` +
`See https://vuejs.org/guide/list.html#key for more info.`,
el.rawAttrsMap['v-for'],
true /* tip */
)
}
// 标记当前节点上的 v-for 指令已经被处理过了
el.forProcessed = true // avoid r
// 得到 `_l(exp, function(alias, iterator1, iterator2){return _c(tag, data, children)})`
return `${altHelper || '_l'}((${exp}),` +
`function(${alias}${iterator1}${iterator2}){` +
`return ${(altGen || genElement)(el, state)}` +
'})'
}
genIf
/src/compiler/codegen/index.js
/**
* 处理带有 v-if 指令的节点，最终得到一个三元表达式，condition ? render1 : render2
*/
export function genIf(
el: any,
state: CodegenState,
altGen?: Function,
altEmpty?: string
): string {
// 标记当前节点的 v-if 指令已经被处理过了，避免无效的递归
el.ifProcessed = true // avoid recursion
// 得到三元表达式，condition ? render1 : render2
return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
}
function genIfConditions(
conditions: ASTIfConditions,
state: CodegenState,
altGen?: Function,
altEmpty?: string
): string {
// 长度若为空，则直接返回一个空节点渲染函数
if (!conditions.length) {
return altEmpty || '_e()'
}
// 从 conditions 数组中拿出第一个条件对象 { exp, block }
const condition = conditions.shift()
// 返回结果是一个三元表达式字符串，condition ? 渲染函数1 : 渲染函数2
if (condition.exp) {
// 如果 condition.exp 条件成立，则得到一个三元表达式，
// 如果条件不成立，则通过递归的方式找 conditions 数组中下一个元素，
// 直到找到条件成立的元素，然后返回一个三元表达式
return `(${condition.exp})?${genTernaryExp(condition.block)
}:${genIfConditions(conditions, state, altGen, altEmpty)
}`
} else {
return `${genTernaryExp(condition.block)}`
}
// v-if with v-once should generate code like (a)?_m(0):_m(1)
function genTernaryExp(el) {
return altGen
? altGen(el, state)
: el.once
? genOnce(el, state)
: genElement(el, state)
}
}
genSlot
/src/compiler/codegen/index.js
/**
* 生成插槽的渲染函数，得到
* _t(slotName, children, attrs, bind)
*/
function genSlot(el: ASTElement, state: CodegenState): string {
// 插槽名称
const slotName = el.slotName || '"default"'
// 生成所有的子节点
const children = genChildren(el, state)
// 结果字符串，_t(slotName, children, attrs, bind)
let res = `_t(${slotName}${children ? `,${children}` : ''}`
const attrs = el.attrs || el.dynamicAttrs
? genProps((el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
// slot props are camelized
name: camelize(attr.name),
value: attr.value,
dynamic: attr.dynamic
})))
: null
const bind = el.attrsMap['v-bind']
if ((attrs || bind) && !children) {
res += `,null`
}
if (attrs) {
res += `,${attrs}`
}
if (bind) {
res += `${attrs ? '' : ',null'},${bind}`
}
return res + ')'
}
genComponent
/src/compiler/codegen/index.js
// componentName is el.component, take it as argument to shun flow's pessimistic refinement
/**
* 生成动态组件的渲染函数
* 返回 `_c(compName, data, children)`
*/
function genComponent(
componentName: string,
el: ASTElement,
state: CodegenState
): string {
// 所有的子节点
const children = el.inlineTemplate ? null : genChildren(el, state, true)
// 返回 `_c(compName, data, children)`
// compName 是 is 属性的值
return `_c(${componentName},${genData(el, state)}${children ? `,${children}` : ''
})`
}
Summarize
-
The interviewer asked : Briefly, what does the Vue compiler do?
Answer :
Vue's compiler does three things:
-
Parse the component's html template into an AST object
-
Optimize, traverse the AST, mark each node statically, mark whether it is a static node, and then further mark the static root node, so that these static nodes can be skipped in the subsequent update process; marking the static root is used to generate In the rendering function stage, the rendering function of the static root node is generated
-
Generate and run the rendering function from the AST, that is, the render that everyone said, there is actually another one, the staticRenderFns array, which stores the rendering functions of all static nodes
-
<hr />
-
Interviewer : Tell me in detail about the generation process of the rendering function
Answer :
When you talk about rendering functions, you basically mean the render function. In fact, there are two types of renderings generated by the compiler:
-
The first type is a render function, which is responsible for generating the vnode of the dynamic node
-
The second type is the static rendering function placed in an array called staticRenderFns, these functions are responsible for generating the vnode of the static node
The process of rendering function generation is actually traversing AST nodes, processing each node recursively, and finally generating
_c(tag, attr, children, normalizationType)a result in the form of: . tag is the name of the tag, attr is the attribute object, children is an array of child nodes, and the format of each element is_c(tag, attr, children, normalizationTYpe)in the form of .In the process of processing AST nodes, everyone needs to focus on the common questions in interviews:
-
How are static nodes handled?
The processing of static nodes is divided into two steps:
-
Put the function that generates the static node vnode into the staticRenderFns array
-
Returns an executable function of _m(idx), which means to execute the function with the subscript idx in the staticRenderFns array to generate the vnode of the static node
-
-
How are v-once, v-if, v-for, components, etc. handled
-
Simple v-once nodes are handled in the same way as static nodes
-
The result of processing the v-if node is a ternary expression
-
The processing result of the v-for node is the executable _l function, which is responsible for generating the vnode of the v-for node
-
The processing result of the component is the same as that of the ordinary element, and
_c(compName)the the vnode of the component is generated.
-
-
<hr />
At this point, the source code interpretation of the Vue compiler is over. I believe that in the process of reading, you will inevitably have a feeling of fog in the clouds. This is nothing, the compiler is indeed more complicated, it can be said that the whole framework is the most difficult to understand and the largest part of the code. Be sure to calm down and read it several times. When you encounter something that you cannot understand, you must be diligent and help yourself understand it by adding breakpoint debugging to the sample code.
After you have read it a few times, the situation may be better at this time, but you may still feel a little dizzy in some places, this is ok, it is normal. After all, this is a framework compiler, there are too many things to deal with, you only need to understand its core ideas (template parsing, static markup, code generation). There will be a series of handwritten , and a simplified version of the compiler will be implemented to help deepen the understanding of this part of the knowledge.
After the compiler reads it, you will find something unclear: the final code generated by the compiler is withwrapped , for example:
<div id="app">
<div v-for="item in arr" :key="item">{{ item }}</div>
</div>
Generated after compilation:
with (this) {
return _c(
'div',
{
attrs:
{
"id": "app"
}
},
_l(
(arr),
function (item) {
return _c(
'div',
{
key: item
},
[_v(_s(item))]
)
}
),
0
)
}
As we all know, the withstatement can expand the scope chain, so the generated code is _c、_l、_v、_sall some methods on this, that is to say, executing these methods at runtime can generate the vnode of each node.
So in connection with the previous knowledge, the entire execution process of responsive data update is:
-
Responsive interception of data updates
-
dep notifies watcher for asynchronous update
-
Execute the component update function updateComponent when the watcher is updated
-
First execute vm._render to generate the vnode of the component, then the function generated by the compiler will be executed
-
Question :
-
What are the methods
_c、_l、、_v、_slike ? -
How do they generate vnodes?
-
The next article: Vue source code interpretation (11) - render helper will bring a detailed interpretation of this part of the knowledge, which is often asked in interviews: for example: v-forWhat is the principle?
Link
- Supporting video, WeChat public account reply : "Proficient in Vue technology stack source code principle video version" Get
- Proficient in Vue technology stack source code principle column
- github repository liyongning/Vue welcomes Star
Thank you for your attention , likes , favorites and comments , see you in the next issue.
When learning becomes a habit, knowledge becomes common sense. Thank you for your attention , likes , favorites and comments .
New videos and articles will be sent on the WeChat public account as soon as possible, welcome to follow: Li Yongning lyn
The article has been included in the github repository liyongning/blog . Welcome to Watch and Star.