【大型干货】来看看vue对template作了什么（附部分源码及注释）
在整理这篇文章时，我感到了困惑，困惑的是不知道该怎么用更好的方式来将这部分繁琐的内容让你很容易的看的明白。我也但愿这篇文章能做为你的在阅读时引导，你能够一块儿边看引导，边看源码。javascript
如何找到咱们须要关注的最终方法
还记得以前的《手拉手带你过一遍vue部分源码》吗？在那里，咱们已经知道，在src/platform/web/entry-runtime-with-compiler.js重写原型的$mount方法时，已经将template转换为render函数了，接下来，咱们从这个地方做为入口。html
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
复制代码
compileToFunctions从哪来的？说真的 这个问题看源码的时候 还挺绕的，首先引自于platforms/web/compiler/index.js，而后发现是调用了src/compiler/index.js的createCompiler方法，而createCompiler又是经过调用src/compiler/create-compiler.js的createCompilerCreator方法，而咱们使用的compileToFunctions方法呢，又是经过调用src/compiler/to-function.js中的createCompileToFunctionFn来建立的，因此，这里，咱们为了好记，暂时忽略中间的全部步骤。 先从最后一步开始看吧。vue
createCompileToFunctionFn(src/compiler/to-function.js)
代码有点多久不在这里不全贴出来了，我说，你看着。java
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.'
)
}
}
复制代码
这段代码作了什么？在当前情景下，至关于
eval('function fn() {return 1}，检测当前网页的内容安全政策，具体CSP是什么，能够看一下阮老师的CSP。这里为何要作检测？好问题，先记住，继续往下看，你会本身获得答案。node
const key = options.delimiters
? String(options.delimiters) + template
: template
if (cache[key]) {
return cache[key]
}
复制代码
又一段代码来为了提升效率，直接从缓存中查找是否有已经编译好的结果，有则直接返回。web
const compiled = compile(template, options)
复制代码
这里的compile方法就须要看src/compiler/create-compiler.js文件的createCompilerCreator中的function compile了。express
compile(src/compiler/create-compiler.js)
在compile方法里，主要作了作了3件事api
-
将传入的
CompilerOptions通过处理后挂载至finalOptions中数组这里
finalOptions最终会变成：缓存
- 将
template、finalOptions传入src/compiler/index.js文件的baseCompile中。 - 收集
ast转换时的错误信息。
baseCompile(src/compiler/index.js)
这里咱们进入到baseCompile中，看看baseCompile作了什么。
parse
// 将传入html 转换为ast语法树
const ast = parse(template.trim(), options)
复制代码
划重点啦，经过parse方法将咱们传入的template中的内容，转换为AST语法树
一块儿来看下src/compiler/parser/index.js文件中的parse方法。
function parse (template, options){
warn = options.warn || baseWarn
platformIsPreTag = options.isPreTag || no
platformMustUseProp = options.mustUseProp || no
platformGetTagNamespace = options.getTagNamespace || no
// pluckModuleFunction：找出options.mudules中每一项中属性含有key方法
transforms = pluckModuleFunction(options.modules, 'transformNode')
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
delimiters = options.delimiters
// 存放astNode
const stack = []
const preserveWhitespace = options.preserveWhitespace !== false
// 定义根节点
let root
// 当前处理节点的父节点
let currentParent
// 标识属性中是否有v-pre的
// 什么是v-pre，见 https://cn.vuejs.org/v2/api/#v-pre
let inVPre = false
// 标识是否为pre标签
let inPre = false
// 标识是否已经触发warn
let warned = false
function warnOnce (msg) {}
function closeElement (element) {}
// 经过循环的方式解析传入html
parseHTML(params)
/** * 处理v-pre * @param {*} el */
function processPre() {}
/** * 处理html原生属性 * @param {*} el */
function processRawAttrs (el) {}
return root
}
复制代码
从上面部分咱们能够看出，实际作转换的是
parseHTML方法，咱们在上面省略了parseHTML的参数，由于在parseHTML方法内部，会用到参数中的start、end、chars、comment方法，因此为了防止你们迷惑，在这里我会在文章的最后，拆出来专门为每一个方法提供注释，方便你们阅读。
这里先进入src/compiler/parser/html-parser.js中看看parseHTML方法吧。
function parseHTML (html, options) {
const stack = []
const expectHTML = options.expectHTML
const isUnaryTag = options.isUnaryTag || no
const canBeLeftOpenTag = options.canBeLeftOpenTag || no
// 声明index，标识当前处理传入html的索引
let index = 0
let last, lastTag
// 循环处理html
while (html) {...}
// Clean up any remaining tags
parseEndTag()
/** * 修改当前处理标记索引，而且将html已处理部分截取掉 * @param {*} n 位数 */
function advance (n) {}
/** * 处理开始标签，将属性放入attrs中 */
function parseStartTag () {}
/** * 将parseStartTag处理的结果进行处理而且经过options.start生成ast node * @param {*} match 经过parseStartTag处理的结果 */
function handleStartTag (match) {}
/** * 处理结束标签 * @param {*} tagName 标签名 * @param {*} start 在html中起始位置 * @param {*} end 在html中结束位置 */
function parseEndTag (tagName, start, end) {}
}
复制代码
这里咱们保留了部分片断，完整的注释部分，我会放在文章的最后。
经过parse方法，咱们将整个抽象语法树拿到了。
optimize
对当前抽象语法树进行优化，标识出静态节点，这部分咱们下一篇关于vNode的文章会再提到。
generate(scr/compiler/codegen/index.js)
这部分会将咱们的抽象语法树，转换为对应的render方法的字符串。有兴趣的能够自行翻阅，看这部分时，你会更清晰一点 在vue instance时，为原型挂载了各类_字母的方法的用意
没错 你没看作，这里转换的是
with(this){...}的字符串，因此上面为何在编译template会检测是否容许使用eval是否是有眉目了？。
小结
经过compile中的parse、optimize、generate将template转换为了render。
最后
若是你喜欢，我会继续为你带来render时，虚拟DOM相关的文章。
附录—源码+注释
options.start
start (tag, attrs, unary) {
// check namespace.
// inherit parent ns if there is one
const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
// handle IE svg bug
/* istanbul ignore if */
// 处理IE的svg的BUG
if (isIE && ns === 'svg') {
attrs = guardIESVGBug(attrs)
}
// 建立AST NODE
let element: ASTElement = createASTElement(tag, attrs, currentParent)
if (ns) {
element.ns = ns
}
// 判断当前节点若是是<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.'
)
}
// apply pre-transforms
for (let i = 0; i < preTransforms.length; i++) {
element = preTransforms[i](element, options) || element
}
if (!inVPre) {
processPre(element)
if (element.pre) {
inVPre = true
}
}
if (platformIsPreTag(element.tag)) {
inPre = true
}
// 若是含有v-pre，则跳过编译过程
if (inVPre) {
processRawAttrs(element)
} else if (!element.processed) {
// structural directives
// 处理v-for
processFor(element)
// 处理v-if v-else-if v-else
processIf(element)
// 处理v-once
processOnce(element)
// element-scope stuff
// 处理ast node节点，key、ref、slot、component、attrs
processElement(element, options)
}
// root节点约束检测
function checkRootConstraints (el) {
if (process.env.NODE_ENV !== 'production') {
// slot、template不能做为root
if (el.tag === 'slot' || el.tag === 'template') {
warnOnce(
`Cannot use <${el.tag}> as component root element because it may ` +
'contain multiple nodes.'
)
}
// root节点中不能存在v-for
if (el.attrsMap.hasOwnProperty('v-for')) {
warnOnce(
'Cannot use v-for on stateful component root element because ' +
'it renders multiple elements.'
)
}
}
}
// tree management
if (!root) {
root = element
checkRootConstraints(root)
} else if (!stack.length) {
// allow root elements with v-if, v-else-if and v-else
if (root.if && (element.elseif || element.else)) {
checkRootConstraints(element)
addIfCondition(root, {
exp: element.elseif,
block: element
})
} else if (process.env.NODE_ENV !== 'production') {
warnOnce(
`Component template should contain exactly one root element. ` +
`If you are using v-if on multiple elements, ` +
`use v-else-if to chain them instead.`
)
}
}
if (currentParent && !element.forbidden) {
if (element.elseif || element.else) {
processIfConditions(element, currentParent)
} else if (element.slotScope) { // scoped slot
currentParent.plain = false
const name = element.slotTarget || '"default"'
;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
} else {
currentParent.children.push(element)
element.parent = currentParent
}
}
if (!unary) {
currentParent = element
stack.push(element)
} else {
closeElement(element)
}
}
复制代码
options.end
end () {
// remove trailing whitespace
// 拿到stack中最后一个ast node
const element = stack[stack.length - 1]
// 找到最近处理的一个节点
const lastNode = element.children[element.children.length - 1]
if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
element.children.pop()
}
// pop stack
// 将element从stack移除
stack.length -= 1
currentParent = stack[stack.length - 1]
closeElement(element)
}
复制代码
options.chars
chars (text: string) {
// 文本没有父节点处理
if (!currentParent) {
if (process.env.NODE_ENV !== 'production') {
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.'
)
} else if ((text = text.trim())) {
warnOnce(
`text "${text}" outside root element will be ignored.`
)
}
}
return
}
// IE textarea placeholder bug
/* istanbul ignore if */
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {
return
}
const children = currentParent.children
// 格式化text
text = inPre || text.trim()
? isTextTag(currentParent) ? text : decodeHTMLCached(text)
// only preserve whitespace if its not right after a starting tag
: preserveWhitespace && children.length ? ' ' : ''
if (text) {
// 处理{{text}}部分，将{{text}}转为
// {expression: '_s(text)', token: [{'@binding': 'text'}]}
let res
if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
children.push({
type: 2,
expression: res.expression,
tokens: res.tokens,
text
})
} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
children.push({
type: 3,
text
})
}
}
}
复制代码
parseHTML
function parseHTML (html, options) {
const stack = []
const expectHTML = options.expectHTML
const isUnaryTag = options.isUnaryTag || no
const canBeLeftOpenTag = options.canBeLeftOpenTag || no
// 声明index，标识当前处理传入html的索引
let index = 0
let last, lastTag
while (html) {
last = html
// Make sure we're not in a plaintext content element like script/style
if (!lastTag || !isPlainTextElement(lastTag)) {
let textEnd = html.indexOf('<')
// 是否以<开头
if (textEnd === 0) {
// Comment:
// 判断是不是<!-- 开头的注释
if (comment.test(html)) {
const commentEnd = html.indexOf('-->')
if (commentEnd >= 0) {
if (options.shouldKeepComment) {
options.comment(html.substring(4, commentEnd))
}
advance(commentEnd + 3)
continue
}
}
// 判断是否为兼容性注释以 <![ 开头
// <!--[if IE 6]>
// Special instructions for IE 6 here
// <![endif]-->
// http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
if (conditionalComment.test(html)) {
const conditionalEnd = html.indexOf(']>')
if (conditionalEnd >= 0) {
advance(conditionalEnd + 2)
continue
}
}
// 判断是否以<!DOCTYPE 开头
// Doctype:
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
advance(doctypeMatch[0].length)
continue
}
// 判断是否为结束标签
// End tag:
const endTagMatch = html.match(endTag)
if (endTagMatch) {
const curIndex = index
advance(endTagMatch[0].length)
parseEndTag(endTagMatch[1], curIndex, index)
continue
}
// 经过parseStartTag后，会将html = '<div id="demo">...</div>'
// 的标签处理为 html = '...<div>'
// 返回的match = {
// start: 0, // 开始索引
// end: 15, // 结束索引
// tagName: 'div'
// attrs: [] // 这里的数组为正则匹配出来标签的attributes
// }
// Start tag:
const startTagMatch = parseStartTag()
if (startTagMatch) {
handleStartTag(startTagMatch)
if (shouldIgnoreFirstNewline(lastTag, html)) {
advance(1)
}
continue
}
}
let text, rest, next
// 这里因为咱们的html代码可能会有制表位 换行等不须要解析的操做
// 这里将无用的东西移除，而后继续循环html
if (textEnd >= 0) {
rest = html.slice(textEnd)
while (
!endTag.test(rest) &&
!startTagOpen.test(rest) &&
!comment.test(rest) &&
!conditionalComment.test(rest)
) {
// < in plain text, be forgiving and treat it as text
next = rest.indexOf('<', 1)
if (next < 0) break
textEnd += next
rest = html.slice(textEnd)
}
text = html.substring(0, textEnd)
advance(textEnd)
}
if (textEnd < 0) {
text = html
html = ''
}
// 处理字符
if (options.chars && text) {
options.chars(text)
}
} else {
let endTagLength = 0
const stackedTag = lastTag.toLowerCase()
const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
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)
}
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}"`)
}
break
}
}
// Clean up any remaining tags
parseEndTag()
/** * 修改当前处理标记索引，而且将html已处理部分截取掉 * @param {*} n 位数 */
function advance (n) {
index += n
html = html.substring(n)
}
/** * 处理开始标签，将属性放入attrs中 */
function parseStartTag () {
const start = html.match(startTagOpen)
if (start) {
const match = {
tagName: start[1],
attrs: [],
start: index
}
// 处理完头部信息，将头部移除掉
advance(start[0].length)
let end, attr
// 循环找尾部【>】，若是没有到尾部时，就向attrs中添加当前正则匹配出的属性。
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
advance(attr[0].length)
match.attrs.push(attr)
}
// 将尾部【>】从html中移除，记录当前处理完的索引
if (end) {
match.unarySlash = end[1]
advance(end[0].length)
match.end = index
return match
}
}
}
/** * 将parseStartTag处理的结果进行处理而且经过options.start生成ast node * @param {*} match 经过parseStartTag处理的结果 */
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)
}
}
const unary = isUnaryTag(tagName) || !!unarySlash
const l = match.attrs.length
const attrs = new Array(l)
for (let i = 0; i < l; i++) {
const args = match.attrs[i]
// hackish work around FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=369778
if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
if (args[3] === '') { delete args[3] }
if (args[4] === '') { delete args[4] }
if (args[5] === '') { delete args[5] }
}
const value = args[3] || args[4] || args[5] || ''
const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
? options.shouldDecodeNewlinesForHref
: options.shouldDecodeNewlines
attrs[i] = {
name: args[1],
value: decodeAttr(value, shouldDecodeNewlines)
}
}
if (!unary) {
stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })
lastTag = tagName
}
if (options.start) {
options.start(tagName, attrs, unary, match.start, match.end)
}
}
/** * 处理结束标签 * @param {*} tagName 标签名 * @param {*} start 在html中起始位置 * @param {*} end 在html中结束位置 */
function parseEndTag (tagName, start, end) {
let pos, lowerCasedTagName
if (start == null) start = index
if (end == null) end = index
if (tagName) {
lowerCasedTagName = tagName.toLowerCase()
}
// Find the closest opened tag of the same type
// 从stack中找到与当前tag匹配的节点，这里利用倒序，匹配最近的
if (tagName) {
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
}
if (pos >= 0) {
// 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.`
)
}
if (options.end) {
options.end(stack[i].tag, start, end)
}
}
// Remove the open elements from the stack
stack.length = pos
lastTag = pos && stack[pos - 1].tag
// 处理br
} else if (lowerCasedTagName === 'br') {
if (options.start) {
options.start(tagName, [], true, start, end)
}
// 处理p标签
} else if (lowerCasedTagName === 'p') {
if (options.start) {
options.start(tagName, [], false, start, end)
}
if (options.end) {
options.end(tagName, start, end)
}
}
}
}
复制代码
相关文章
- 1. 【大型干货】来看看vue对template作了什么（附部分源码及注释）
- 2. 小白看源码之Vue篇-1：new Vue()干了什么？
- 3. 快来看看卷积操作到底都干了什么
- 4. 从源码上来看，Vue对象的每一个生命周期钩子前都干了什么？
- 5. 从源码上来看，Vue对象的每个生命周期钩子前都干了什么？
- 6. 【大型干货】手拉手带你过一遍vue部分源码
- 7. Vue源码分析(一) : new Vue () 作了什么
- 8. 【读vue 源码】溯源 import Vue from 'vue' 到底作了什么?
- 9. 看懂源码之注释规范
- 10. idea 查看JDK源码没有注释
- 更多相关文章...
- • R 注释 - R 语言教程
- • Rust 注释 - RUST 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
欢迎关注本站公众号,获取更多信息
相关文章