浅谈vue中.vue文件解析流程


Posted in Javascript onApril 24, 2018

我们平时写的 .vue 文件称为 SFC(Single File Components),本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的。

vue 提供了一个 compiler.parseComponent(file, [options]) 方法,来将 .vue 文件解析成一个 descriptor:

// an object format describing a single-file component.
declare type SFCDescriptor = {
  template: ?SFCBlock;
  script: ?SFCBlock;
  styles: Array<SFCBlock>;
  customBlocks: Array<SFCBlock>;
};

文件入口

解析 sfc 文件的入口在 src/sfc/parser.js 中,该文件 export 了 parseComponent 方法, parseComponent 方法用来对单文件组件进行编译。

接下来我们看看 parseComponent 方法都做了哪些事情。

parseComponent 方法

function start(tag, attrs, unary, start, end,){
}

function end(tag, start, end){
}

parseHTML(content, {
  start,
  end
})

parseComponent 方法中定义了 start``end 两个函数,之后调用了 parseHTML 方法来对 .vue 文件内容践行编译。

那么这个 parseHTML 方法是做啥的呢?

parseHTML 方法

该方法看名字就知道是一个 html-parser,可以简单理解为,解析到每个起始标签时,调用 option 中的 start;每个标签结束时,调用 option 中的 end。

对应到这里,就是分别调用 parseComponent 方法中定义的 start 和 end 函数。

在 parseComponent 中维护一个 depth 变量,在 start 中将 depth++ ,在 end 中 depth-- 。那么,每个 depth === 0 的标签就是我们需要获取的信息,包含 template、script、style 以及一些自定义标签。

start

每当遇到一个起始标签时,执行 start 函数。

1、记录下 currentBlock。

每个 currentBlock 包含以下内容:

declare type SFCBlock = {
  type: string;
  content: string;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
};

2、根据 tag 名称,将 currentBlock 对象在返回结果对象中。

返回结果对象定义为 sfc,如果tag不是 script,style,template 中的任一个,就放在 sfc.customBlocks 中。如果是style,就放在 sfc.styles 中。script 和 template 则直接放在 sfc 下。

if (isSpecialTag(tag)) {
  checkAttrs(currentBlock, attrs)
  if (tag === 'style') {
    sfc.styles.push(currentBlock)
  } else {
    sfc[tag] = currentBlock
  }
} else { // custom blocks
  sfc.customBlocks.push(currentBlock)
}

end

每当遇到一个结束标签时,执行 end 函数。

1、如果当前是第一层标签(depth === 1),并且 currentBlock 变量存在,那么取出这部分text,放在 currentBlock.content 中。

if (depth === 1 && currentBlock) {
 currentBlock.end = start
 let text = deindent(content.slice(currentBlock.start, currentBlock.end))
 // pad content so that linters and pre-processors can output correct
 // line numbers in errors and warnings
 if (currentBlock.type !== 'template' && options.pad) {
  text = padContent(currentBlock, options.pad) + text
 }
 currentBlock.content = text
 currentBlock = null
}

2、depth-- 。

得到 descriptor

在将 .vue 整个遍历一遍后,得到的 sfc 对象即为我们需要的结果。

生成 .js ?

compiler.parseComponent(file, [options]) 得到的只是一个组件的 SFCDescriptor ,最终编译成.js 文件是交给 vue-loader 等库来做的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
JS中的事件委托实例浅析
Mar 22 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue-cli2.9.3 详细教程
Apr 23 #Javascript
vue.js数据绑定操作详解
Apr 23 #Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 #Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 #Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python操作xml文件示例
2014/04/07 Python
Python map和reduce函数用法示例
2015/02/26 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python实现支付宝转账接口
2019/05/07 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python 穷举指定长度的密码例子
2020/04/02 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
客服专员岗位职责
2014/02/28 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
win10清理dns缓存
2022/04/19 数码科技