当学习成为了习惯，常识也就变成了常识。 感激各位的 关注 、 点赞 、 珍藏 和评论。
新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn
文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。
非凡阐明
因为文章篇幅限度，所以将 Vue 源码解读（8）—— 编译器 之 解析 拆成了高低两篇，所以在浏览本篇文章时请同时关上 Vue 源码解读（8）—— 编译器 之 解析（下）一起浏览。
前言
Vue 源码解读（4）—— 异步更新 最初说到刷新 watcher 队列，执行每个 watcher.run 办法，由 watcher.run 调用 watcher.get，从而执行 watcher.getter 办法，进入理论的更新阶段。这个流程如果不相熟，倡议大家再去读一下这篇文章。
当更新一个渲染 watcher 时，执行的是 updateComponent 办法：
// /src/core/instance/lifecycle.js
const updateComponent = () => {// 执行 vm._render() 函数，失去 虚构 DOM，并将 vnode 传递给 _update 办法，接下来就该到 patch 阶段了
vm._update(vm._render(), hydrating)
}
能够看到每次更新前都须要先执行一下 vm._render() 办法，vm._render 就是大家常常听到的 render 函数，由两种形式失去：
- 用户本人提供，在编写组件时，用 render 选项代替模版
- 由编译器编译组件模版生成 render 选项
明天咱们就来深入研究编译器，看看它是怎么将咱们平时编写的类 html 模版编译成 render 函数的。
编译器的外围由三局部组成：
- 解析，将类 html 模版转换为 AST 对象
- 优化，也叫动态标记，遍历 AST 对象，标记每个节点是否为动态节点，以及标记出动态根节点
- 生成渲染函数，将 AST 对象生成渲染函数
因为编译器这块儿的代码量太大，所以，将这部分常识拆成三局部来讲，第一局部就是：解析。
指标
深刻了解 Vue 编译器的解析过程，了解如何将类 html 模版字符串转换成 AST 对象。
源码解读
接下来咱们去源码中找答案。
浏览倡议
因为解析过程代码量微小，所以倡议大家抓住主线：“解析类 HTML 字符串模版，生成 AST 对象”，而这个 AST 对象就是咱们最终要失去的后果，所以大家在浏览的过程中，要入手记录这个 AST 对象，这样有助于了解，也让你不那么容易迷失。
也能够先浏览 下篇 的 帮忙 局部，有个提前的筹备和心理预期。
入口 – $mount
编译器的入口地位在 /src/platforms/web/entry-runtime-with-compiler.js，有两种形式找到这个入口
- 断点调试，Vue 源码解读（2）—— Vue 初始化过程 中讲到，初始化的最初一步是执行
$mount进行挂载，在全量的 Vue 包中这一步就会进入编译阶段。 - 通过 rollup 的配置文件一步步的去找
/src/platforms/web/entry-runtime-with-compiler.js
/**
* 编译器的入口
* 运行时的 Vue.js 包就没有这部分的代码，通过 打包器 联合 vue-loader + vue-compiler-utils 进行预编译，将模版编译成 render 函数
*
* 就做了一件事件，失去组件的渲染函数，将其设置到 this.$options 上
*/
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 挂载点
el = el && query(el)
// 挂载点不能是 body 或者 html
/* 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
/**
* 如果用户提供了 render 配置项，则间接跳过编译阶段，否则进入编译阶段
* 解析 template 和 el，并转换为 render 函数
* 优先级：render > template > el
*/
if (!options.render) {
let template = options.template
if (template) {
// 解决 template 选项
if (typeof template === 'string') {if (template.charAt(0) === '#') {// { template: '#app'}，template 是一个 id 选择器，则获取该元素的 innerHtml 作为模版
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 是一个失常的元素，获取其 innerHtml 作为模版
template = template.innerHTML
} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
// 设置了 el 选项，获取 el 选择器的 outerHtml 作为模版
template = getOuterHTML(el)
}
if (template) {
// 模版就绪，进入编译阶段
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile')
}
// 编译模版，失去 动静渲染函数和动态渲染函数
const {render, staticRenderFns} = compileToFunctions(template, {
// 在非生产环境下，编译时记录标签属性在模版字符串中开始和完结的地位索引
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
// 界定符，默认 {{}}
delimiters: options.delimiters,
// 是否保留正文
comments: options.comments
}, this)
// 将两个渲染函数放到 this.$options 上
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
// 执行挂载
return mount.call(this, el, hydrating)
}
compileToFunctions
/src/compiler/to-function.js
/**
* 1、执行编译函数，失去编译后果 -> compiled
* 2、解决编译期间产生的 error 和 tip，别离输入到控制台
* 3、将编译失去的字符串代码通过 new Function(codeStr) 转换成可执行的函数
* 4、缓存编译后果
* @param {string} template 字符串模版
* @param {CompilerOptions} options 编译选项
* @param {Component} vm 组件实例
* @return {render, staticRenderFns}
*/
return function compileToFunctions(
template: string,
options?: CompilerOptions,
vm?: Component
): CompiledFunctionResult {
// 传递进来的编译选项
options = extend({}, options)
// 日志
const warn = options.warn || baseWarn
delete options.warn
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production') {
// 检测可能的 CSP 限度
try {new Function('return 1')
} catch (e) {if (e.toString().match(/unsafe-eval|CSP/)) {
// 看起来你在一个 CSP 不平安的环境中应用完整版的 Vue.js，模版编译器不能工作在这样的环境中。// 思考放宽策略限度或者预编译你的 template 为 render 函数
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.'
)
}
}
}
// 如果有缓存，则跳过编译，间接从缓存中获取上次编译的后果
const key = options.delimiters
? String(options.delimiters) + template
: template
if (cache[key]) {return cache[key]
}
// 执行编译函数，失去编译后果
const compiled = compile(template, options)
// 查看编译期间产生的 error 和 tip，别离输入到控制台
if (process.env.NODE_ENV !== 'production') {if (compiled.errors && compiled.errors.length) {if (options.outputSourceRange) {
compiled.errors.forEach(e => {
warn(`Error compiling template:\n\n${e.msg}\n\n` +
generateCodeFrame(template, e.start, e.end),
vm
)
})
} else {
warn(`Error compiling template:\n\n${template}\n\n` +
compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
vm
)
}
}
if (compiled.tips && compiled.tips.length) {if (options.outputSourceRange) {compiled.tips.forEach(e => tip(e.msg, vm))
} else {compiled.tips.forEach(msg => tip(msg, vm))
}
}
}
// 转换编译失去的字符串代码为函数，通过 new Function(code) 实现
// turn code into functions
const res = {}
const fnGenErrors = []
res.render = createFunction(compiled.render, fnGenErrors)
res.staticRenderFns = compiled.staticRenderFns.map(code => {return createFunction(code, fnGenErrors)
})
// 解决下面代码转换过程中呈现的谬误，这一步个别不会报错，除非编译器自身出错了
/* 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 (cache[key] = res)
}
compile
/src/compiler/create-compiler.js
/**
* 编译函数，做了两件事：* 1、选项合并，将 options 配置项 合并到 finalOptions(baseOptions) 中，失去最终的编译配置对象
* 2、调用外围编译器 baseCompile 失去编译后果
* 3、将编译期间产生的 error 和 tip 挂载到编译后果上，返回编译后果
* @param {*} template 模版
* @param {*} options 配置项
* @returns
*/
function compile(
template: string,
options?: CompilerOptions
): CompiledResult {
// 以平台特有的编译配置为原型创立编译选项对象
const finalOptions = Object.create(baseOptions)
const errors = []
const tips = []
// 日志，负责记录将 error 和 tip
let warn = (msg, range, tip) => {(tip ? tips : errors).push(msg)
}
// 如果存在编译选项，合并 options 和 baseOptions
if (options) {
// 开发环境走
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
// $flow-disable-line
const leadingSpaceLength = template.match(/^\s*/)[0].length
// 加强 日志 办法
warn = (msg, range, tip) => {const data: WarningMessage = { msg}
if (range) {if (range.start != null) {data.start = range.start + leadingSpaceLength}
if (range.end != null) {data.end = range.end + leadingSpaceLength}
}
(tip ? tips : errors).push(data)
}
}
/**
* 将 options 中的配置项合并到 finalOptions
*/
// 合并自定义 module
if (options.modules) {
finalOptions.modules =
(baseOptions.modules || []).concat(options.modules)
}
// 合并自定义指令
if (options.directives) {
finalOptions.directives = extend(Object.create(baseOptions.directives || null),
options.directives
)
}
// 拷贝其它配置项
for (const key in options) {if (key !== 'modules' && key !== 'directives') {finalOptions[key] = options[key]
}
}
}
// 日志
finalOptions.warn = warn
// 到这里为止终于到重点了，调用外围编译函数，传递模版字符串和最终的编译选项，失去编译后果
// 后面做的所有事件都是为了构建平台最终的编译选项
const compiled = baseCompile(template.trim(), finalOptions)
if (process.env.NODE_ENV !== 'production') {detectErrors(compiled.ast, warn)
}
// 将编译期间产生的谬误和提醒挂载到编译后果上
compiled.errors = errors
compiled.tips = tips
return compiled
}
baseOptions
/src/platforms/web/compiler/options.js
export const baseOptions: CompilerOptions = {
expectHTML: true,
// 解决 class、style、v-model
modules,
// 解决指令
// 是否是 pre 标签
isPreTag,
// 是否是自闭合标签
isUnaryTag,
// 规定了一些应该应用 props 进行绑定的属性
mustUseProp,
// 能够只写开始标签的标签，完结标签浏览器会主动补全
canBeLeftOpenTag,
// 是否是保留标签（html + svg）isReservedTag,
// 获取标签的命名空间
getTagNamespace,
staticKeys: genStaticKeys(modules)
}
baseCompile
/src/compiler/index.js
/**
* 在这之前做的所有的事件，只有一个目标，就是为了构建平台特有的编译选项（options），比方 web 平台
*
* 1、将 html 模版解析成 ast
* 2、对 ast 树进行动态标记
* 3、将 ast 生成渲染函数
* 动态渲染函数放到 code.staticRenderFns 数组中
* code.render 为动静渲染函数
* 在未来渲染时执行渲染函数失去 vnode
*/
function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 将模版解析为 AST，每个节点的 ast 对象上都设置了元素的所有信息，比方，标签信息、属性信息、插槽信息、父节点、子节点等。// 具体有那些属性，查看 start 和 end 这两个解决开始和完结标签的办法
const ast = parse(template.trim(), options)
// 优化，遍历 AST，为每个节点做动态标记
// 标记每个节点是否为动态节点，而后进一步标记出动态根节点
// 这样在后续更新中就能够跳过这些动态节点了
// 标记动态根，用于生成渲染函数阶段，生成动态根节点的渲染函数
if (options.optimize !== false) {optimize(ast, options)
}
// 从 AST 生成渲染函数，生成像这样的代码，比方：code.render = "_c('div',{attrs:{"id":"app"}},_l((arr),function(item){return _c('div',{key:item},[_v(_s(item))])}),0)"
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
}
parse
留神：因为这部分的代码量太大，于是将代码在结构上做了一些调整，不便大家浏览和了解。
/src/compiler/parser/index.js
/**
*
* 将 HTML 字符串转换为 AST
* @param {*} template HTML 模版
* @param {*} options 平台特有的编译选项
* @returns root
*/
export function parse(
template: s tring,
options: CompilerOptions
): ASTElement | void {
// 日志
warn = options.warn || baseWarn
// 是否为 pre 标签
platformIsPreTag = options.isPreTag || no
// 必须应用 props 进行绑定的属性
platformMustUseProp = options.mustUseProp || no
// 获取标签的命名空间
platformGetTagNamespace = options.getTagNamespace || no
// 是否是保留标签（html + svg)
const isReservedTag = options.isReservedTag || no
// 判断一个元素是否为一个组件
maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)
// 别离获取 options.modules 下的 class、model、style 三个模块中的 transformNode、preTransformNode、postTransformNode 办法
// 负责解决元素节点上的 class、style、v-model
transforms = pluckModuleFunction(options.modules, 'transformNode')
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
// 界定符，比方: {{}}
delimiters = options.delimiters
const stack = []
// 空格选项
const preserveWhitespace = options.preserveWhitespace !== false
const whitespaceOption = options.whitespace
// 根节点，以 root 为根，解决后的节点都会依照层级挂载到 root 下，最初 return 的就是 root，一个 ast 语法树
let root
// 以后元素的父元素
let currentParent
let inVPre = false
let inPre = false
let warned = false
// 解析 html 模版字符串，解决所有标签以及标签上的属性
// 这里的 parseHTMLOptions 在前面处理过程中用到，再进一步解析
// 提前解析的话容易让大家岔开思路
parseHTML(template, parseHtmlOptions)
// 返回生成的 ast 对象
return root
parseHTML
/src/compiler/parser/html-parser.js
/**
* 通过循环遍历 html 模版字符串，顺次解决其中的各个标签，以及标签上的属性
* @param {*} html html 模版
* @param {*} options 配置项
*/
export function parseHTML(html, options) {const stack = []
const expectHTML = options.expectHTML
// 是否是自闭合标签
const isUnaryTag = options.isUnaryTag || no
// 是否能够只有开始标签
const canBeLeftOpenTag = options.canBeLeftOpenTag || no
// 记录以后在原始 html 字符串中的开始地位
let index = 0
let last, lastTag
while (html) {
last = html
// 确保不是在 script、style、textarea 这样的纯文本元素中
if (!lastTag || !isPlainTextElement(lastTag)) {
// 找第一个 < 字符
let textEnd = html.indexOf('<')
// textEnd === 0 阐明在结尾找到了
// 别离解决可能找到的正文标签、条件正文标签、Doctype、开始标签、完结标签
// 每解决完一种状况，就会截断（continue）循环，并且重置 html 字符串，将解决过的标签截掉，下一次循环解决残余的 html 字符串模版
if (textEnd === 0) {
// 解决正文标签 <!-- xx -->
if (comment.test(html)) {
// 正文标签的完结索引
const commentEnd = html.indexOf('-->')
if (commentEnd >= 0) {
// 是否应该保留 正文
if (options.shouldKeepComment) {
// 失去：正文内容、正文的开始索引、完结索引
options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)
}
// 调整 html 和 index 变量
advance(commentEnd + 3)
continue
}
}
// 解决条件正文标签：<!--[if IE]>
// http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
if (conditionalComment.test(html)) {
// 找到完结地位
const conditionalEnd = html.indexOf(']>')
if (conditionalEnd >= 0) {
// 调整 html 和 index 变量
advance(conditionalEnd + 2)
continue
}
}
// 解决 Doctype，<!DOCTYPE html>
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {advance(doctypeMatch[0].length)
continue
}
/**
* 解决开始标签和完结标签是这整个函数中的核型局部，其它的不必管
* 这两局部就是在结构 element ast
*/
// 解决完结标签，比方 </div>
const endTagMatch = html.match(endTag)
if (endTagMatch) {
const curIndex = index
advance(endTagMatch[0].length)
// 解决完结标签
parseEndTag(endTagMatch[1], curIndex, index)
continue
}
// 解决开始标签，比方 <div id="app">，startTagMatch = {tagName: 'div', attrs: [[xx], ...], start: index }
const startTagMatch = parseStartTag()
if (startTagMatch) {
// 进一步解决上一步失去后果，并最初调用 options.start 办法
// 真正的解析工作都是在这个 start 办法中做的
handleStartTag(startTagMatch)
if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {advance(1)
}
continue
}
}
let text, rest, next
if (textEnd >= 0) {
// 能走到这儿，阐明尽管在 html 中匹配到到了 <xx，然而这不属于上述几种状况，// 它就只是一个一般的一段文本：< 我是文本
// 于是从 html 中找到下一个 <，直到 <xx 是上述几种状况的标签，则完结，// 在这整个过程中始终在调整 textEnd 的值，作为 html 中下一个无效标签的开始地位
// 截取 html 模版字符串中 textEnd 之后的内容，rest = <xx
rest = html.slice(textEnd)
// 这个 while 循环就是解决 <xx 之后的纯文本状况
// 截取文本内容，并找到无效标签的开始地位（textEnd）while (!endTag.test(rest) &&
!startTagOpen.test(rest) &&
!comment.test(rest) &&
!conditionalComment.test(rest)
) {
// 则认为 < 前面的内容为纯文本，而后在这些纯文本中再次找 <
next = rest.indexOf('<', 1)
// 如果没找到 <，则间接完结循环
if (next < 0) break
// 走到这儿阐明在后续的字符串中找到了 <，索引地位为 textEnd
textEnd += next
// 截取 html 字符串模版 textEnd 之后的内容赋值给 rest，持续判断之后的字符串是否存在标签
rest = html.slice(textEnd)
}
// 走到这里，阐明遍历完结，有两种状况，一种是 < 之后就是一段纯文本，要不就是在前面找到了无效标签，截取文本
text = html.substring(0, textEnd)
}
// 如果 textEnd < 0，阐明 html 中就没找到 <，那阐明 html 就是一段文本
if (textEnd < 0) {text = html}
// 将文本内容从 html 模版字符串上截取掉
if (text) {advance(text.length)
}
// 解决文本
// 基于文本生成 ast 对象，而后将该 ast 放到它的父元素的肚子里，// 即 currentParent.children 数组中
if (options.chars && text) {options.chars(text, index - text.length, index)
}
} else {
// 解决 script、style、textarea 标签的闭合标签
let endTagLength = 0
// 开始标签的小写模式
const stackedTag = lastTag.toLowerCase()
const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
// 匹配并解决开始标签和完结标签之间的所有文本，比方 <script>xx</script>
const rest = html.replace(reStackedTag, function (all, text, endTag) {
endTagLength = endTag.length
if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
text = text
.replace(/<!\--([\s\S]*?)-->/g, '$1') // #7298
.replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
}
if (shouldIgnoreFirstNewline(stackedTag, text)) {text = text.slice(1)
}
if (options.chars) {options.chars(text)
}
return ''
})
index += html.length - rest.length
html = rest
parseEndTag(stackedTag, index - endTagLength, index)
}
// 到这里就解决完结，如果 stack 数组中还有内容，则阐明有标签没有被闭合，给出提示信息
if (html === last) {options.chars && options.chars(html)
if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {options.warn(`Mal-formatted tag at end of template: "${html}"`, {start: index + html.length})
}
break
}
}
// Clean up any remaining tags
parseEndTag()}
advance
/src/compiler/parser/html-parser.js
/**
* 重置 html，html = 从索引 n 地位开始的向后的所有字符
* index 为 html 在 原始的 模版字符串 中的的开始索引，也是下一次该解决的字符的开始地位
* @param {*} n 索引
*/
function advance(n) {
index += n
html = html.substring(n)
}
parseStartTag
/src/compiler/parser/html-parser.js
/**
* 解析开始标签，比方：<div id="app">
* @returns {tagName: 'div', attrs: [[xx], ...], start: index }
*/
function parseStartTag() {const start = html.match(startTagOpen)
if (start) {
// 处理结果
const match = {
// 标签名
tagName: start[1],
// 属性，占位符
attrs: [],
// 标签的开始地位
start: index
}
/**
* 调整 html 和 index，比方：* html = 'id="app">'
* index = 此时的索引
* start[0] = '<div'
*/
advance(start[0].length)
let end, attr
// 解决 开始标签 内的各个属性，并将这些属性放到 match.attrs 数组中
while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
attr.start = index
advance(attr[0].length)
attr.end = index
match.attrs.push(attr)
}
// 开始标签的完结，end = '>' 或 end = '/>'
if (end) {match.unarySlash = end[1]
advance(end[0].length)
match.end = index
return match
}
}
}
handleStartTag
/src/compiler/parser/html-parser.js
/**
* 进一步解决开始标签的解析后果 ——— match 对象
* 解决属性 match.attrs，如果不是自闭合标签，则将标签信息放到 stack 数组，待未来解决到它的闭合标签时再将其弹出 stack，示意该标签处理完毕，这时标签的所有信息都在 element ast 对象上了
* 接下来调用 options.start 办法解决标签，并依据标签信息生成 element ast，* 以及解决开始标签上的属性和指令，最初将 element ast 放入 stack 数组
*
* @param {*} match {tagName: 'div', attrs: [[xx], ...], start: index }
*/
function handleStartTag(match) {
const tagName = match.tagName
// />
const unarySlash = match.unarySlash
if (expectHTML) {if (lastTag === 'p' && isNonPhrasingTag(tagName)) {parseEndTag(lastTag)
}
if (canBeLeftOpenTag(tagName) && lastTag === tagName) {parseEndTag(tagName)
}
}
// 一元标签，比方 <hr />
const unary = isUnaryTag(tagName) || !!unarySlash
// 解决 match.attrs，失去 attrs = [{name: attrName, value: attrVal, start: xx, end: xx}, ...]
// 比方 attrs = [{name: 'id', value: 'app', start: xx, end: xx}, ...]
const l = match.attrs.length
const attrs = new Array(l)
for (let i = 0; i < l; i++) {const args = match.attrs[i]
// 比方：args[3] => 'id'，args[4] => '='，args[5] => 'app'
const value = args[3] || args[4] || args[5] || ''const shouldDecodeNewlines = tagName ==='a'&& args[1] ==='href'
? options.shouldDecodeNewlinesForHref
: options.shouldDecodeNewlines
// attrs[i] = {id: 'app'}
attrs[i] = {name: args[1],
value: decodeAttr(value, shouldDecodeNewlines)
}
// 非生产环境，记录属性的开始和完结索引
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {attrs[i].start = args.start + args[0].match(/^\s*/).length
attrs[i].end = args.end
}
}
// 如果不是自闭合标签，则将标签信息放到 stack 数组中，待未来解决到它的闭合标签时再将其弹出 stack
// 如果是自闭合标签，则标签信息就没必要进入 stack 了，间接解决泛滥属性，将他们都设置到 element ast 对象上，就没有解决 完结标签的那一步了，这一步在解决开始标签的过程中就进行了
if (!unary) {// 将标签信息放到 stack 数组中，{ tag, lowerCasedTag, attrs, start, end}
stack.push({tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
// 标识以后标签的完结标签为 tagName
lastTag = tagName
}
/**
* 调用 start 办法，次要做了以下 6 件事件:
* 1、创立 AST 对象
* 2、解决存在 v-model 指令的 input 标签，别离解决 input 为 checkbox、radio、其它的状况
* 3、解决标签上的泛滥指令，比方 v-pre、v-for、v-if、v-once
* 4、如果根节点 root 不存在则设置以后元素为根节点
* 5、如果以后元素为非自闭合标签则将本人 push 到 stack 数组，并记录 currentParent，在接下来解决子元素时用来通知子元素本人的父节点是谁
* 6、如果以后元素为自闭合标签，则示意该标签要解决完结了，让本人和父元素产生关系，以及设置本人的子元素
*/
if (options.start) {options.start(tagName, attrs, unary, match.start, match.end)
}
}
parseEndTag
/src/compiler/parser/html-parser.js
/**
* 解析完结标签，比方：</div>
* 最次要的事就是：* 1、解决 stack 数组，从 stack 数组中找到以后完结标签对应的开始标签，而后调用 options.end 办法
* 2、解决完完结标签之后调整 stack 数组，保障在失常状况下 stack 数组中的最初一个元素就是下一个完结标签对应的开始标签
* 3、解决一些异常情况，比方 stack 数组最初一个元素不是以后完结标签对应的开始标签，还有就是
* br 和 p 标签独自解决
* @param {*} tagName 标签名，比方 div
* @param {*} start 完结标签的开始索引
* @param {*} end 完结标签的完结索引
*/
function parseEndTag(tagName, start, end) {
let pos, lowerCasedTagName
if (start == null) start = index
if (end == null) end = index
// 倒序遍历 stack 数组，找到第一个和以后完结标签雷同的标签，该标签就是完结标签对应的开始标签的形容对象
// 实践上，不出异样，stack 数组中的最初一个元素就是以后完结标签的开始标签的形容对象
// Find the closest opened tag of the same type
if (tagName) {lowerCasedTagName = tagName.toLowerCase()
for (pos = stack.length - 1; pos >= 0; pos--) {if (stack[pos].lowerCasedTag === lowerCasedTagName) {break}
}
} else {
// If no tag name is provided, clean shop
pos = 0
}
// 如果在 stack 中始终没有找到雷同的标签名，则 pos 就会 < 0，进行前面的 else 分支
if (pos >= 0) {
// 这个 for 循环负责敞开 stack 数组中索引 >= pos 的所有标签
// 为什么要用一个循环，下面说到失常状况下 stack 数组的最初一个元素就是咱们要找的开始标签，// 然而有些异常情况，就是有些元素没有给提供完结标签，比方：// stack = ['span', 'div', 'span', 'h1']，以后解决的完结标签 tagName = div
// 匹配到 div，pos = 1，那索引为 2 和 3 的两个标签（span、h1）阐明就没提供完结标签
// 这个 for 循环就负责敞开 div、span 和 h1 这三个标签，// 并在开发环境为 span 和 h1 这两个标签给出”未匹配到完结标签的提醒”// Close all the open elements, up the stack
for (let i = stack.length - 1; i >= pos; i--) {
if (process.env.NODE_ENV !== 'production' &&
(i > pos || !tagName) &&
options.warn
) {
options.warn(`tag <${stack[i].tag}> has no matching end tag.`,
{start: stack[i].start, end: stack[i].end }
)
}
if (options.end) {
// 走到这里，阐明下面的异常情况都解决完了，调用 options.end 解决失常的完结标签
options.end(stack[i].tag, start, end)
}
}
// 将方才解决的那些标签从数组中移除，保障数组的最初一个元素就是下一个完结标签对应的开始标签
// Remove the open elements from the stack
stack.length = pos
// lastTag 记录 stack 数组中未解决的最初一个开始标签
lastTag = pos && stack[pos - 1].tag
} else if (lowerCasedTagName === 'br') {
// 以后解决的标签为 <br /> 标签
if (options.start) {options.start(tagName, [], true, start, end)
}
} else if (lowerCasedTagName === 'p') {
// p 标签
if (options.start) {
// 解决 <p> 标签
options.start(tagName, [], false, start, end)
}
if (options.end) {
// 解决 </p> 标签
options.end(tagName, start, end)
}
}
}
parseHtmlOptions
src/compiler/parser/index.js
定义如何解决开始标签、完结标签、文本节点和正文节点。
start
/**
* 次要做了以下 6 件事件:
* 1、创立 AST 对象
* 2、解决存在 v-model 指令的 input 标签，别离解决 input 为 checkbox、radio、其它的状况
* 3、解决标签上的泛滥指令，比方 v-pre、v-for、v-if、v-once
* 4、如果根节点 root 不存在则设置以后元素为根节点
* 5、如果以后元素为非自闭合标签则将本人 push 到 stack 数组，并记录 currentParent，在接下来解决子元素时用来通知子元素本人的父节点是谁
* 6、如果以后元素为自闭合标签，则示意该标签要解决完结了，让本人和父元素产生关系，以及设置本人的子元素
* @param {*} tag 标签名
* @param {*} attrs [{name: attrName, value: attrVal, start, end}, ...] 模式的属性数组
* @param {*} unary 自闭合标签
* @param {*} start 标签在 html 字符串中的开始索引
* @param {*} end 标签在 html 字符串中的完结索引
*/
function start(tag, attrs, unary, start, end) {
// 查看命名空间，如果存在，则继承父命名空间
// check namespace.
// inherit parent ns if there is one
const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
// handle IE svg bug
/* istanbul ignore if */
if (isIE && ns === 'svg') {attrs = guardIESVGBug(attrs)
}
// 创立以后标签的 AST 对象
let element: ASTElement = createASTElement(tag, attrs, currentParent)
// 设置命名空间
if (ns) {element.ns = ns}
// 这段在非生产环境下会走，在 ast 对象上增加 一些 属性，比方 start、end
if (process.env.NODE_ENV !== 'production') {if (options.outputSourceRange) {
element.start = start
element.end = end
// 将属性数组解析成 {attrName: { name: attrName, value: attrVal, start, end}, ... } 模式的对象
element.rawAttrsMap = element.attrsList.reduce((cumulated, attr) => {cumulated[attr.name] = attr
return cumulated
}, {})
}
// 验证属性是否无效，比方属性名不能蕴含: spaces, quotes, <, >, / or =.
attrs.forEach(attr => {if (invalidAttributeRE.test(attr.name)) {
warn(
`Invalid dynamic argument expression: attribute names cannot contain ` +
`spaces, quotes, <, >, / or =.`,
{start: attr.start + attr.name.indexOf(`[`),
end: attr.start + attr.name.length
}
)
}
})
}
// 非服务端渲染的状况下，模版中不应该呈现 style、script 标签
if (isForbiddenTag(element) && !isServerRendering()) {
element.forbidden = true
process.env.NODE_ENV !== 'production' && warn(
'Templates should only be responsible for mapping the state to the' +
'UI. Avoid placing tags with side-effects in your templates, such as' +
`<${tag}>` + ', as they will not be parsed.',
{start: element.start}
)
}
/**
* 为 element 对象别离执行 class、style、model 模块中的 preTransforms 办法
* 不过 web 平台只有 model 模块有 preTransforms 办法
* 用来解决存在 v-model 的 input 标签，但没解决 v-model 属性
* 别离解决了 input 为 checkbox、radio 和 其它的状况
* input 具体是哪种状况由 el.ifConditions 中的条件来判断
* <input v-mode="test" :type="checkbox or radio or other(比方 text)" />
*/
// apply pre-transforms
for (let i = 0; i < preTransforms.length; i++) {element = preTransforms[i](element, options) || element
}
if (!inVPre) {
// 示意 element 是否存在 v-pre 指令，存在则设置 element.pre = true
processPre(element)
if (element.pre) {
// 存在 v-pre 指令，则设置 inVPre 为 true
inVPre = true
}
}
// 如果 pre 标签，则设置 inPre 为 true
if (platformIsPreTag(element.tag)) {inPre = true}
if (inVPre) {
// 阐明标签上存在 v-pre 指令，这样的节点只会渲染一次，将节点上的属性都设置到 el.attrs 数组对象中，作为动态属性，数据更新时不会渲染这部分内容
// 设置 el.attrs 数组对象，每个元素都是一个属性对象 {name: attrName, value: attrVal, start, end}
processRawAttrs(element)
} else if (!element.processed) {
// structural directives
// 解决 v-for 属性，失去 element.for = 可迭代对象 element.alias = 别名
processFor(element)
/**
* 解决 v-if、v-else-if、v-else
* 失去 element.if = "exp"，element.elseif = exp, element.else = true
* v-if 属性会额定在 element.ifConditions 数组中增加 {exp, block} 对象
*/
processIf(element)
// 解决 v-once 指令，失去 element.once = true
processOnce(element)
}
// 如果 root 不存在，则示意以后解决的元素为第一个元素，即组件的 根 元素
if (!root) {
root = element
if (process.env.NODE_ENV !== 'production') {
// 查看根元素，对根元素有一些限度，比方：不能应用 slot 和 template 作为根元素，也不能在有状态组件的根元素上应用 v-for 指令
checkRootConstraints(root)
}
}
if (!unary) {
// 非自闭合标签，通过 currentParent 记录以后元素，下一个元素在解决的时候，就晓得本人的父元素是谁
currentParent = element
// 而后将 element push 到 stack 数组，未来解决到以后元素的闭合标签时再拿进去
// 将以后标签的 ast 对象 push 到 stack 数组中，这里须要留神，在调用 options.start 办法
// 之前也产生过一次 push 操作，那个 push 进来的是以后标签的一个根本配置信息
stack.push(element)
} else {
/**
* 阐明以后元素为自闭合标签，次要做了 3 件事：* 1、如果元素没有被解决过，即 el.processed 为 false，则调用 processElement 办法解决节点上的泛滥属性
* 2、让本人和父元素产生关系，将本人放到父元素的 children 数组中，并设置本人的 parent 属性为 currentParent
* 3、设置本人的子元素，将本人所有非插槽的子元素放到本人的 children 数组中
*/
closeElement(element)
}
}end
/**
* 解决完结标签
* @param {*} tag 完结标签的名称
* @param {*} start 完结标签的开始索引
* @param {*} end 完结标签的完结索引
*/
function end(tag, start, end) {
// 完结标签对应的开始标签的 ast 对象
const element = stack[stack.length - 1]
// pop stack
stack.length -= 1
// 这块儿有点不太了解，因为上一个元素有可能是以后元素的兄弟节点
currentParent = stack[stack.length - 1]
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {element.end = end}
/**
* 次要做了 3 件事：* 1、如果元素没有被解决过，即 el.processed 为 false，则调用 processElement 办法解决节点上的泛滥属性
* 2、让本人和父元素产生关系，将本人放到父元素的 children 数组中，并设置本人的 parent 属性为 currentParent
* 3、设置本人的子元素，将本人所有非插槽的子元素放到本人的 children 数组中
*/
closeElement(element)
}
chars
/**
* 解决文本，基于文本生成 ast 对象，而后将该 ast 放到它的父元素的肚子里，即 currentParent.children 数组中
*/
function chars(text: string, start: number, end: number) {
// 异样解决，currentParent 不存在阐明这段文本没有父元素
if (!currentParent) {if (process.env.NODE_ENV !== 'production') {if (text === template) { // 文本不能作为组件的根元素
warnOnce(
'Component template requires a root element, rather than just text.',
{start}
)
} else if ((text = text.trim())) { // 放在根元素之外的文本会被疏忽
warnOnce(`text "${text}" outside root element will be ignored.`,
{start}
)
}
}
return
}
// IE textarea placeholder bug
/* istanbul ignore if */
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {return}
// 以后父元素的所有孩子节点
const children = currentParent.children
// 对 text 进行一系列的解决，比方删除空白字符，或者存在 whitespaceOptions 选项，则 text 间接置为空或者空格
if (inPre || text.trim()) {// 文本在 pre 标签内 或者 text.trim() 不为空
text = isTextTag(currentParent) ? text : decodeHTMLCached(text)
} else if (!children.length) {// 阐明文本不在 pre 标签内而且 text.trim() 为空，而且以后父元素也没有孩子节点，// 则将 text 置为空
// remove the whitespace-only node right after an opening tag
text = ''
} else if (whitespaceOption) {
// 压缩解决
if (whitespaceOption === 'condense') {
// in condense mode, remove the whitespace node if it contains
// line break, otherwise condense to a single space
text = lineBreakRE.test(text) ? '':' '
} else {text = ' '}
} else {text = preserveWhitespace ? '' :''}
// 如果通过解决后 text 还存在
if (text) {if (!inPre && whitespaceOption === 'condense') {
// 不在 pre 节点中，并且配置选项中存在压缩选项，则将多个间断空格压缩为单个
// condense consecutive whitespaces into single space
text = text.replace(whitespaceRE, ' ')
}
let res
// 基于 text 生成 AST 对象
let child: ?ASTNode
if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
// 文本中存在表达式（即有界定符）child = {
type: 2,
// 表达式
expression: res.expression,
tokens: res.tokens,
// 文本
text
}
} else if (text !== '' || !children.length || children[children.length - 1].text !==' ') {
// 纯文本节点
child = {
type: 3,
text
}
}
// child 存在，则将 child 放到父元素的肚子里，即 currentParent.children 数组中
if (child) {if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
child.start = start
child.end = end
}
children.push(child)
}
}
},
comment
/**
* 解决正文节点
*/
function comment(text: string, start, end) {
// adding anything as a sibling to the root node is forbidden
// comments should still be allowed, but ignored
// 禁止将任何内容作为 root 的节点的同级进行增加，正文应该被容许，然而会被疏忽
// 如果 currentParent 不存在，阐明正文和 root 为同级，疏忽
if (currentParent) {
// 正文节点的 ast
const child: ASTText = {
// 节点类型
type: 3,
// 正文内容
text,
// 是否为正文
isComment: true
}
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
// 记录节点的开始索引和完结索引
child.start = start
child.end = end
}
// 将以后正文节点放到父元素的 children 属性中
currentParent.children.push(child)
}
}
createASTElement
/src/compiler/parser/index.js
/**
* 为指定元素创立 AST 对象
* @param {*} tag 标签名
* @param {*} attrs 属性数组，[{name: attrName, value: attrVal, start, end}, ...]
* @param {*} parent 父元素
* @returns {type: 1, tag, attrsList, attrsMap: makeAttrsMap(attrs), rawAttrsMap: {}, parent, children: []}
*/
export function createASTElement(
tag: string,
attrs: Array<ASTAttr>,
parent: ASTElement | void
): ASTElement {
return {
// 节点类型
type: 1,
// 标签名
tag,
// 标签的属性数组
attrsList: attrs,
// 标签的属性对象 {attrName: attrVal, ...}
attrsMap: makeAttrsMap(attrs),
// 原始属性对象
rawAttrsMap: {},
// 父节点
parent,
// 孩子节点
children: []}
}
preTransformNode
/src/platforms/web/compiler/modules/model.js
/**
* 解决存在 v-model 的 input 标签，但没解决 v-model 属性
* 别离解决了 input 为 checkbox、radio 和 其它的状况
* input 具体是哪种状况由 el.ifConditions 中的条件来判断
* <input v-mode="test" :type="checkbox or radio or other(比方 text)" />
* @param {*} el
* @param {*} options
* @returns branch0
*/
function preTransformNode (el: ASTElement, options: CompilerOptions) {if (el.tag === 'input') {
const map = el.attrsMap
// 不存在 v-model 属性，间接完结
if (!map['v-model']) {return}
// 获取 :type 的值
let typeBinding
if (map[':type'] || map['v-bind:type']) {typeBinding = getBindingAttr(el, 'type')
}
if (!map.type && !typeBinding && map['v-bind']) {typeBinding = `(${map['v-bind']}).type`
}
// 如果存在 type 属性
if (typeBinding) {
// 获取 v-if 的值，比方：<input v-model="test" :type="checkbox" v-if="test" />
const ifCondition = getAndRemoveAttr(el, 'v-if', true)
// &&test
const ifConditionExtra = ifCondition ? `&&(${ifCondition})` : ``
// 是否存在 v-else 属性，<input v-else />
const hasElse = getAndRemoveAttr(el, 'v-else', true) != null
// 获取 v-else-if 属性的值 <inpu v-else-if="test" />
const elseIfCondition = getAndRemoveAttr(el, 'v-else-if', true)
// 克隆一个新的 el 对象，别离解决 input 为 chekbox、radio 或 其它的状况
// 具体是哪种状况，通过 el.ifConditins 条件来判断
// 1. checkbox
const branch0 = cloneASTElement(el)
// process for on the main node
// <input v-for="item in arr" :key="item" />
// 解决 v-for 表达式，失去 branch0.for = arr, branch0.alias = item
processFor(branch0)
// 在 branch0.attrsMap 和 branch0.attrsList 对象中增加 type 属性
addRawAttr(branch0, 'type', 'checkbox')
// 别离解决元素节点的 key、ref、插槽、自闭合的 slot 标签、动静组件、class、style、v-bind、v-on、其它指令和一些原生属性
processElement(branch0, options)
// 标记以后对象曾经被解决过了
branch0.processed = true // prevent it from double-processed
// 失去 true&&test or false&&test，标记以后 input 是否为 checkbox
branch0.if = `(${typeBinding})==='checkbox'` + ifConditionExtra
// 在 branch0.ifConfitions 数组中放入 {exp, block} 对象
addIfCondition(branch0, {
exp: branch0.if,
block: branch0
})
// 克隆一个新的 ast 对象
// 2. add radio else-if condition
const branch1 = cloneASTElement(el)
// 获取 v-for 属性值
getAndRemoveAttr(branch1, 'v-for', true)
// 在 branch1.attrsMap 和 branch1.attrsList 对象中增加 type 属性
addRawAttr(branch1, 'type', 'radio')
// 别离解决元素节点的 key、ref、插槽、自闭合的 slot 标签、动静组件、class、style、v-bind、v-on、其它指令和一些原生属性
processElement(branch1, options)
// 在 branch0.ifConfitions 数组中放入 {exp, block} 对象
addIfCondition(branch0, {
// 标记以后 input 是否为 radio
exp: `(${typeBinding})==='radio'` + ifConditionExtra,
block: branch1
})
// 3. other，input 为其它的状况
const branch2 = cloneASTElement(el)
getAndRemoveAttr(branch2, 'v-for', true)
addRawAttr(branch2, ':type', typeBinding)
processElement(branch2, options)
addIfCondition(branch0, {
exp: ifCondition,
block: branch2
})
// 给 branch0 设置 else 或 elseif 条件
if (hasElse) {branch0.else = true} else if (elseIfCondition) {branch0.elseif = elseIfCondition}
return branch0
}
}
}
getBindingAttr
/src/compiler/helpers.js
/**
* 获取 el 对象上执行属性 name 的值
*/
export function getBindingAttr (
el: ASTElement,
name: string,
getStatic?: boolean
): ?string {
// 获取指定属性的值
const dynamicValue =
getAndRemoveAttr(el, ':' + name) ||
getAndRemoveAttr(el, 'v-bind:' + name)
if (dynamicValue != null) {return parseFilters(dynamicValue)
} else if (getStatic !== false) {const staticValue = getAndRemoveAttr(el, name)
if (staticValue != null) {return JSON.stringify(staticValue)
}
}
}
getAndRemoveAttr
/src/compiler/helpers.js
/**
* 从 el.attrsList 中删除指定的属性 name
* 如果 removeFromMap 为 true，则同样删除 el.attrsMap 对象中的该属性，* 比方 v-if、v-else-if、v-else 等属性就会被移除,
* 不过个别不会删除该对象上的属性，因为从 ast 生成 代码 期间还须要应用该对象
* 返回指定属性的值
*/
// note: this only removes the attr from the Array (attrsList) so that it
// doesn't get processed by processAttrs.
// By default it does NOT remove it from the map (attrsMap) because the map is
// needed during codegen.
export function getAndRemoveAttr (
el: ASTElement,
name: string,
removeFromMap?: boolean
): ?string {
let val
// 将执行属性 name 从 el.attrsList 中移除
if ((val = el.attrsMap[name]) != null) {
const list = el.attrsList
for (let i = 0, l = list.length; i < l; i++) {if (list[i].name === name) {list.splice(i, 1)
break
}
}
}
// 如果 removeFromMap 为 true，则从 el.attrsMap 中移除指定的属性 name
// 不过个别不会移除 el.attsMap 中的数据，因为从 ast 生成 代码 期间还须要应用该对象
if (removeFromMap) {delete el.attrsMap[name]
}
// 返回执行属性的值
return val
}
processFor
/src/compiler/parser/index.js
/**
* 解决 v-for，将后果设置到 el 对象上，失去:
* el.for = 可迭代对象，比方 arr
* el.alias = 别名，比方 item
* @param {*} el 元素的 ast 对象
*/
export function processFor(el: ASTElement) {
let exp
// 获取 el 上的 v-for 属性的值
if ((exp = getAndRemoveAttr(el, 'v-for'))) {// 解析 v-for 的表达式，失去 { for: 可迭代对象，alias: 别名}，比方 {for: arr, alias: item}
const res = parseFor(exp)
if (res) {
// 将 res 对象上的属性拷贝到 el 对象上
extend(el, res)
} else if (process.env.NODE_ENV !== 'production') {
warn(`Invalid v-for expression: ${exp}`,
el.rawAttrsMap['v-for']
)
}
}
}
addRawAttr
/src/compiler/helpers.js
// 在 el.attrsMap 和 el.attrsList 中增加指定属性 name
// add a raw attr (use this in preTransforms)
export function addRawAttr (el: ASTElement, name: string, value: any, range?: Range) {el.attrsMap[name] = value
el.attrsList.push(rangeSetItem({ name, value}, range))
}
processElement
/src/compiler/parser/index.js
/**
* 别离解决元素节点的 key、ref、插槽、自闭合的 slot 标签、动静组件、class、style、v-bind、v-on、其它指令和一些原生属性
* 而后在 el 对象上增加如下属性：* el.key、ref、refInFor、scopedSlot、slotName、component、inlineTemplate、staticClass
* el.bindingClass、staticStyle、bindingStyle、attrs
* @param {*} element 被解决元素的 ast 对象
* @param {*} options 配置项
* @returns
*/
export function processElement(
element: ASTElement,
options: CompilerOptions
) {
// el.key = val
processKey(element)
// 确定 element 是否为一个一般元素
// determine whether this is a plain element after
// removing structural attributes
element.plain = (
!element.key &&
!element.scopedSlots &&
!element.attrsList.length
)
// el.ref = val, el.refInFor = boolean
processRef(element)
// 解决作为插槽传递给组件的内容，失去 插槽名称、是否为动静插槽、作用域插槽的值，以及插槽中的所有子元素，子元素放到插槽对象的 children 属性中
processSlotContent(element)
// 解决自闭合的 slot 标签，失去插槽名称 => el.slotName = xx
processSlotOutlet(element)
// 解决动静组件，<component :is="compoName"></component> 失去 el.component = compName，// 以及标记是否存在内联模版，el.inlineTemplate = true of false
processComponent(element)
// 为 element 对象别离执行 class、style、model 模块中的 transformNode 办法
// 不过 web 平台只有 class、style 模块有 transformNode 办法，别离用来解决 class 属性和 style 属性
// 失去 el.staticStyle、el.styleBinding、el.staticClass、el.classBinding
// 别离寄存动态 style 属性的值、动静 style 属性的值，以及动态 class 属性的值和动静 class 属性的值
for (let i = 0; i < transforms.length; i++) {element = transforms[i](element, options) || element
}
/**
* 解决元素上的所有属性：* v-bind 指令变成：el.attrs 或 el.dynamicAttrs = [{name, value, start, end, dynamic}, ...]，* 或者是必须应用 props 的属性，变成了 el.props = [{name, value, start, end, dynamic}, ...]
* v-on 指令变成：el.events 或 el.nativeEvents = {name: [{ value, start, end, modifiers, dynamic}, ...] }
* 其它指令：el.directives = [{name, rawName, value, arg, isDynamicArg, modifier, start, end}, ...]
* 原生属性：el.attrs = [{name, value, start, end}]，或者一些必须应用 props 的属性，变成了：* el.props = [{name, value: true, start, end, dynamic}]
*/
processAttrs(element)
return element
}
processKey
/src/compiler/parser/index.js
/**
* 解决元素上的 key 属性，设置 el.key = val
* @param {*} el
*/
function processKey(el) {
// 拿到 key 的属性值
const exp = getBindingAttr(el, 'key')
if (exp) {
// 对于 key 应用上的异样解决
if (process.env.NODE_ENV !== 'production') {
// template 标签不容许设置 key
if (el.tag === 'template') {
warn(
`<template> cannot be keyed. Place the key on real elements instead.`,
getRawBindingAttr(el, 'key')
)
}
// 不要在 <transition=group> 的子元素上应用 v-for 的 index 作为 key，这和没用 key 没什么区别
if (el.for) {
const iterator = el.iterator2 || el.iterator1
const parent = el.parent
if (iterator && iterator === exp && parent && parent.tag === 'transition-group') {
warn(
`Do not use v-for index as key on <transition-group> children, ` +
`this is the same as not using keys.`,
getRawBindingAttr(el, 'key'),
true /* tip */
)
}
}
}
// 设置 el.key = exp
el.key = exp
}
}
processRef
/src/compiler/parser/index.js
/**
* 解决元素上的 ref 属性
* el.ref = refVal
* el.refInFor = boolean
* @param {*} el
*/
function processRef(el) {const ref = getBindingAttr(el, 'ref')
if (ref) {
el.ref = ref
// 判断蕴含 ref 属性的元素是否蕴含在具备 v-for 指令的元素内或后辈元素中
// 如果是，则 ref 指向的则是蕴含 DOM 节点或组件实例的数组
el.refInFor = checkInFor(el)
}
}
processSlotContent
/src/compiler/parser/index.js
/**
* 解决作为插槽传递给组件的内容，失去：* slotTarget => 插槽名
* slotTargetDynamic => 是否为动静插槽
* slotScope => 作用域插槽的值
* 间接在 <comp> 标签上应用 v-slot 语法时，将上述属性放到 el.scopedSlots 对象上，其它状况间接放到 el 对象上
* handle content being passed to a component as slot,
* e.g. <template slot="xxx">, <div slot-scope="xxx">
*/
function processSlotContent(el) {
let slotScope
if (el.tag === 'template') {
// template 标签上应用 scope 属性的提醒
// scope 曾经弃用，并在 2.5 之后应用 slot-scope 代替
// slot-scope 即能够用在 template 标签也能够用在一般标签上
slotScope = getAndRemoveAttr(el, 'scope')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && slotScope) {
warn(
`the "scope" attribute for scoped slots have been deprecated and ` +
`replaced by "slot-scope" since 2.5. The new "slot-scope" attribute ` +
`can also be used on plain elements in addition to <template> to ` +
`denote scoped slots.`,
el.rawAttrsMap['scope'],
true
)
}
// el.slotScope = val
el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope')
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && el.attrsMap['v-for']) {
// 元素不能同时应用 slot-scope 和 v-for，v-for 具备更高的优先级
// 应该用 template 标签作为容器，将 slot-scope 放到 template 标签上
warn(`Ambiguous combined usage of slot-scope and v-for on <${el.tag}> ` +
`(v-for takes higher priority). Use a wrapper <template> for the ` +
`scoped slot to make it clearer.`,
el.rawAttrsMap['slot-scope'],
true
)
}
el.slotScope = val
el.slotScope = slotScope
}
// 获取 slot 属性的值
// slot="xxx"，老旧的具名插槽的写法
const slotTarget = getBindingAttr(el, 'slot')
if (slotTarget) {
// el.slotTarget = 插槽名（具名插槽）el.slotTarget = slotTarget === '""'?'"default"' : slotTarget
// 动静插槽名
el.slotTargetDynamic = !!(el.attrsMap[':slot'] || el.attrsMap['v-bind:slot'])
// preserve slot as an attribute for native shadow DOM compat
// only for non-scoped slots.
if (el.tag !== 'template' && !el.slotScope) {addAttr(el, 'slot', slotTarget, getRawBindingAttr(el, 'slot'))
}
}
// 2.6 v-slot syntax
if (process.env.NEW_SLOT_SYNTAX) {if (el.tag === 'template') {
// v-slot 在 tempalte 标签上，失去 v-slot 的值
// v-slot on <template>
const slotBinding = getAndRemoveAttrByRegex(el, slotRE)
if (slotBinding) {
// 异样提醒
if (process.env.NODE_ENV !== 'production') {if (el.slotTarget || el.slotScope) {
// 不同插槽语法禁止混合应用
warn(
`Unexpected mixed usage of different slot syntaxes.`,
el
)
}
if (el.parent && !maybeComponent(el.parent)) {
// <template v-slot> 只能呈现在组件的根地位，比方：// <comp>
// <template v-slot>xx</template>
// </comp>
// 而不能是
// <comp>
// <div>
// <template v-slot>xxx</template>
// </div>
// </comp>
warn(
`<template v-slot> can only appear at the root level inside ` +
`the receiving component`,
el
)
}
}
// 失去插槽名称
const {name, dynamic} = getSlotName(slotBinding)
// 插槽名
el.slotTarget = name
// 是否为动静插槽
el.slotTargetDynamic = dynamic
// 作用域插槽的值
el.slotScope = slotBinding.value || emptySlotScopeToken // force it into a scoped slot for perf
}
} else {
// 解决组件上的 v-slot，<comp v-slot:header />
// slotBinding = {name: "v-slot:header", value: "", start, end}
// v-slot on component, denotes default slot
const slotBinding = getAndRemoveAttrByRegex(el, slotRE)
if (slotBinding) {
// 异样提醒
if (process.env.NODE_ENV !== 'production') {
// el 不是组件的话，提醒，v-slot 只能呈现在组件上或 template 标签上
if (!maybeComponent(el)) {
warn(
`v-slot can only be used on components or <template>.`,
slotBinding
)
}
// 语法混用
if (el.slotScope || el.slotTarget) {
warn(
`Unexpected mixed usage of different slot syntaxes.`,
el
)
}
// 为了防止作用域歧义，当存在其余命名槽时，默认槽也应该应用 <template> 语法
if (el.scopedSlots) {
warn(
`To avoid scope ambiguity, the default slot should also use ` +
`<template> syntax when there are other named slots.`,
slotBinding
)
}
}
// 将组件的孩子增加到它的默认插槽内
// add the component's children to its default slot
const slots = el.scopedSlots || (el.scopedSlots = {})
// 获取插槽名称以及是否为动静插槽
const {name, dynamic} = getSlotName(slotBinding)
// 创立一个 template 标签的 ast 对象，用于包容插槽内容，父级是 el
const slotContainer = slots[name] = createASTElement('template', [], el)
// 插槽名
slotContainer.slotTarget = name
// 是否为动静插槽
slotContainer.slotTargetDynamic = dynamic
// 所有的孩子，将每一个孩子的 parent 属性都设置为 slotContainer
slotContainer.children = el.children.filter((c: any) => {if (!c.slotScope) {
// 给插槽内元素设置 parent 属性为 slotContainer，也就是 template 元素
c.parent = slotContainer
return true
}
})
slotContainer.slotScope = slotBinding.value || emptySlotScopeToken
// remove children as they are returned from scopedSlots now
el.children = []
// mark el non-plain so data gets generated
el.plain = false
}
}
}
}
getSlotName
/src/compiler/parser/index.js
/**
* 解析 binding，失去插槽名称以及是否为动静插槽
* @returns {name: 插槽名称, dynamic: 是否为动静插槽}
*/
function getSlotName(binding) {let name = binding.name.replace(slotRE, '')
if (!name) {if (binding.name[0] !== '#') {name = 'default'} else if (process.env.NODE_ENV !== 'production') {
warn(
`v-slot shorthand syntax requires a slot name.`,
binding
)
}
}
return dynamicArgRE.test(name)
// dynamic [name]
? {name: name.slice(1, -1), dynamic: true }
// static name
: {name: `"${name}"`, dynamic: false }
}
processSlotOutlet
/src/compiler/parser/index.js
// handle <slot/> outlets，解决自闭合 slot 标签
// 失去插槽名称，el.slotName
function processSlotOutlet(el) {if (el.tag === 'slot') {
// 失去插槽名称
el.slotName = getBindingAttr(el, 'name')
// 提示信息，不要在 slot 标签上应用 key 属性
if (process.env.NODE_ENV !== 'production' && el.key) {
warn(
`\`key\` does not work on <slot> because slots are abstract outlets ` +
`and can possibly expand into multiple elements. ` +
`Use the key on a wrapping element instead.`,
getRawBindingAttr(el, 'key')
)
}
}
}
processComponent
/src/compiler/parser/index.js
/**
* 解决动静组件，<component :is="compName"></component>
* 失去 el.component = compName
*/
function processComponent(el) {
let binding
// 解析 is 属性，失去属性值，即组件名称，el.component = compName
if ((binding = getBindingAttr(el, 'is'))) {el.component = binding}
// <component :is="compName" inline-template>xx</component>
// 组件上存在 inline-template 属性，进行标记：el.inlineTemplate = true
// 示意组件开始和完结标签内的内容作为组件模版呈现，而不是作为插槽别散发，不便定义组件模版
if (getAndRemoveAttr(el, 'inline-template') != null) {el.inlineTemplate = true}
}
transformNode
/src/platforms/web/compiler/modules/class.js
/**
* 解决元素上的 class 属性
* 动态的 class 属性值赋值给 el.staticClass 属性
* 动静的 class 属性值赋值给 el.classBinding 属性
*/
function transformNode (el: ASTElement, options: CompilerOptions) {
// 日志
const warn = options.warn || baseWarn
// 获取元素上动态 class 属性的值 xx，<div class="xx"></div>
const staticClass = getAndRemoveAttr(el, 'class')
if (process.env.NODE_ENV !== 'production' && staticClass) {const res = parseText(staticClass, options.delimiters)
// 提醒，同 style 的提醒一样，不能应用 <div class="{{val}}"></div>，请用
// <div :class="val"></div> 代替
if (res) {
warn(`class="${staticClass}": ` +
'Interpolation inside attributes has been removed.' +
'Use v-bind or the colon shorthand instead. For example,' +
'instead of <div class="{{val}}">, use <div :class="val">.',
el.rawAttrsMap['class']
)
}
}
// 动态 class 属性值赋值给 el.staticClass
if (staticClass) {el.staticClass = JSON.stringify(staticClass)
}
// 获取动静绑定的 class 属性值，并赋值给 el.classBinding
const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
if (classBinding) {el.classBinding = classBinding}
}
transformNode
/src/platforms/web/compiler/modules/style.js
/**
* 从 el 上解析出动态的 style 属性和动静绑定的 style 属性，别离赋值给：* el.staticStyle 和 el.styleBinding
* @param {*} el
* @param {*} options
*/
function transformNode(el: ASTElement, options: CompilerOptions) {
// 日志
const warn = options.warn || baseWarn
// <div style="xx"></div>
// 获取 style 属性
const staticStyle = getAndRemoveAttr(el, 'style')
if (staticStyle) {
// 提醒，如果从 xx 中解析到了界定符，阐明是一个动静的 style，// 比方 <div style="{{val}}"></div> 则给出提醒:
// 动静的 style 请应用 <div :style="val"></div>
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production') {const res = parseText(staticStyle, options.delimiters)
if (res) {
warn(`style="${staticStyle}": ` +
'Interpolation inside attributes has been removed.' +
'Use v-bind or the colon shorthand instead. For example,' +
'instead of <div style="{{val}}">, use <div :style="val">.',
el.rawAttrsMap['style']
)
}
}
// 将动态的 style 款式赋值给 el.staticStyle
el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
}
// 获取动静绑定的 style 属性，比方 <div :style="{{val}}"></div>
const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
if (styleBinding) {
// 赋值给 el.styleBinding
el.styleBinding = styleBinding
}
}
链接
- 配套视频，微信公众号回复：” 精通 Vue 技术栈源码原理视频版 ” 获取
- 精通 Vue 技术栈源码原理 专栏
- github 仓库 liyongning/Vue 欢送 Star
感激各位的：关注 、 点赞 、 珍藏 和评论，咱们下期见。
当学习成为了习惯，常识也就变成了常识。 感激各位的 关注 、 点赞 、 珍藏 和评论。
新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn
文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。