Vue源码解析：模版编译之来龙去脉（三）

本篇主要讲解，vue文本的解析。话不多说，先上源码：

//    源码位于 src/compiler/parser/text-parsre.js
const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g
const buildRegex = cached(delimiters => {const open = delimiters[0].replace(regexEscapeRE, '\\$&')const close = delimiters[1].replace(regexEscapeRE, '\\$&')return new RegExp(open + '((?:.|\\n)+?)' + close, 'g')
})
export function parseText (text,delimiters) {const tagRE = delimiters ? buildRegex(delimiters) : defaultTagREif (!tagRE.test(text)) {return}const tokens = []const rawTokens = []/*** let lastIndex = tagRE.lastIndex = 0* 上面这行代码等同于下面这两行代码:* tagRE.lastIndex = 0* let lastIndex = tagRE.lastIndex*/let lastIndex = tagRE.lastIndex = 0let match, index, tokenValuewhile ((match = tagRE.exec(text))) {index = match.index// push text tokenif (index > lastIndex) {// 先把'{{'前面的文本放入tokens中rawTokens.push(tokenValue = text.slice(lastIndex, index))tokens.push(JSON.stringify(tokenValue))}// tag token// 取出'{{ }}'中间的变量expconst exp = parseFilters(match[1].trim())// 把变量exp改成_s(exp)形式也放入tokens中tokens.push(`_s(${exp})`)rawTokens.push({ '@binding': exp })// 设置lastIndex 以保证下一轮循环时，只从'}}'后面再开始匹配正则lastIndex = index + match[0].length}// 当剩下的text不再被正则匹配上时，表示所有变量已经处理完毕// 此时如果lastIndex < text.length，表示在最后一个变量后面还有文本// 最后将后面的文本再加入到tokens中if (lastIndex < text.length) {rawTokens.push(tokenValue = text.slice(lastIndex))tokens.push(JSON.stringify(tokenValue))}// 最后把数组tokens中的所有元素用'+'拼接起来return {expression: tokens.join('+'),tokens: rawTokens}
}

创建来tagRE变量用来检查变量是动态还是文本，其原理主要是用来检测是否有{{}},从而判断是否是动态文本。如果包不包含就直接return，如果包含就继续往下创建变量。开启while循环，首先取得字符串中第一个变量在字符串中的起始位置赋给index，然后比较index和lastIndex的大小，此时你可能有疑问了，这个lastIndex是什么呢？在上面定义变量中，定义了let lastIndex = tagRE.lastIndex = 0,所以lastIndex就是tagRE.lastIndex，而tagRE.lastIndex又是什么呢？当调用exec( )的正则表达式对象具有修饰符g时，它将把当前正则表达式对象的lastIndex属性设置为紧挨着匹配子串的字符位置，当同一个正则表达式第二次调用exec( )，它会将从lastIndex属性所指示的字符串处开始检索，如果exec( )没有发现任何匹配结果，它会将lastIndex重置为0。index>lastIndex时，表示变量前面有纯文本，那么就把这段纯文本截取出来，存入rawTokens中，同时再调用JSON.stringify给这段文本包裹上双引号，存入tokens中。

如果index不大于lastIndex，那说明index也为0，即该文本一开始就是变量，例如：hello。那么此时变量前面没有纯文本，那就不用截取，直接取出匹配结果的第一个元素变量名，将其用_s()包裹存入tokens中，同时再把变量名构造成{'@binding': exp}存入rawTokens中。

当while循环完毕时，表明文本中所有变量已经被解析完毕，如果此时lastIndex < text.length，那就说明最后一个变量的后面还有纯文本，那就将其再存入tokens和rawTokens中。

这就是文本解析的原理。

vue也同样做了优化，就是vue区分了静态节点，和动态节点。这样未来在patch的过程中就可以直接跳过静态节点。

所有的节点都解析完毕之后，生成了AST树之后，是如何生成render函数的呢？

假如，我的template的模版是这样的：

<div id="NLRX"><p>Hello {{name}}</p></div>

那么模版编译后的结果应该是：

ast = {'type': 1,'tag': 'div','attrsList': [{'name':'id','value':'NLRX',}],'attrsMap': {'id': 'NLRX',},'static':false,'parent': undefined,'plain': false,'children': [{'type': 1,'tag': 'p','plain': false,'static':false,'children': [{'type': 2,'expression': '"Hello "+_s(name)','text': 'Hello {{name}}','static':false,}]}]}

是的，就是这个鬼样子。

所以，我们需要对这个AST树进行递归遍历。

export function generate (ast,option) {const state = new CodegenState(options)const code = ast ? genElement(ast, state) : '_c("div")'return {render: `with(this){return ${code}}`,staticRenderFns: state.staticRenderFns}
}

调用generate函数并传入优化后得到的ast。generate内部会判断如果ast不为空，那么就调用genElement创建虚拟dom节点。

export function genElement (el: ASTElement, state: CodegenState): string {if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)} else if (el.once && !el.onceProcessed) {return genOnce(el, state)} else if (el.for && !el.forProcessed) {return genFor(el, state)} else if (el.if && !el.ifProcessed) {return genIf(el, state)} else if (el.tag === 'template' && !el.slotTarget) {return genChildren(el, state) || 'void 0'} else if (el.tag === 'slot') {return genSlot(el, state)} else {// component or elementlet codeif (el.component) {code = genComponent(el.component, el, state)} else {const data = el.plain ? undefined : genData(el, state)const children = el.inlineTemplate ? null : genChildren(el, state, true)code = `_c('${el.tag}'${data ? `,${data}` : '' // data}${children ? `,${children}` : '' // children})`}// module transformsfor (let i = 0; i < state.transforms.length; i++) {code = state.transforms[i](el, code)}return code}
}

通过以上的方法，生成不同类型的，文本节点，标签节点，注释节点。从而生成了render函数，这样在vue挂载阶段，就可以生成vNode.

以上就是vue模版解析的大致过程。初略分析，还需大师指点！！

Vue源码解析：模版编译之来龙去脉（三）相关推荐

[Vue源码解析] patching算法
[Vue源码解析] patching算法 pathching算法:通过对比新旧VNode的不同,然后找出需要更新的节点进行更新操作:1.创建新增节点 2.删除废弃节点 3.修改需要更新的节点创建节 ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
Vue源码解析（尚硅谷）
视频地址:Vue源码解析系列课程一.Vue源码解析之mustache模板引擎 1. 什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法 2. mustac ...
loam源码解析5 ： laserOdometry（三）
transformMaintenance.cpp解析八.位姿估计 1. 雅可比计算 2. 矩阵求解 3. 退化问题分析 4. 姿态更新 5. 坐标转换 loam源码地址: https://githu ...
Vue源码解析(笔记)
github vue源码分析认识flow flow类型检查安装flow sudo npm install -g flow-bin 初始化flow flow init 运行flow命令命令: fl ...
Vue源码解析：虚拟dom比较原理
通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转render函数 Vue双向绑定原理 V ...
Vue源码解析之Template转化为AST的实现方法
什么是AST 在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree) ...
Vue源码解析-$mount
前言 Vue实例是通过mount方法进行挂载的,上一篇说了new Vue这篇分析一下mount挂载方法.mount的定义在Vue源码中有多处,这是因为Vue需要适配不同的平台以及构建方式,本文这里主要 ...
Vue源码解析之数组变异
力有不逮的对象众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...

Vue源码解析：模版编译之来龙去脉（三）

Vue源码解析：模版编译之来龙去脉（三）相关推荐

最新文章

热门文章