都2020了，你还不懂vue中的complie---parse篇

vue中template模板是如何变成我们认识的dom结构呢？是一个complie过程！
complie过程，其实就是拿着template和options生成一个render方法的过程。
compile过程的三个核心，parse，optimize，generate，今天主要说一下parse这个过程！
parse这个过程是生成ast语法树的过程。
具体分析一下！
这个过程其实就是用各种正则进行字符串匹配的过程，所以先罗列一下源码中使用到的正则表达式！

var dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
var unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;
var ncname = "[a-zA-Z_][\\-\\.0-9_a-zA-Z" + (unicodeRegExp.source) + "]*";
var qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")";
var startTagOpen = new RegExp(("^<" + qnameCapture));
var startTagClose = /^\s*(\/?)>/;
var attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
var str = '<span style="color:red">'
var arr = str.match(startTagOpen);
var index = 0;

主函数parseHTML，里面有解析startTag，endTag，comment等等，今天主要说一下如何解析startTag的
定义一下html

var html ='<span v-for="(item,index) in sz" :key="index">';

function advance (n) {
	index += n;
	html = html.substring(n);
}

function parseStartTag () {
    debugger
     // 匹配开始标签<，匹配到start就有值，否则start就是null
    var start = html.match(startTagOpen);
    if (start) {
     // 定义一个match对象，最后将match return出去
      var match = {
        tagName: start[1],
        attrs: [], // 存放开始标签中所有的属性
        start: index
      };
      // 换html--> 利用advance函数，将指针往后移动，同时将html替换为后面未截取的html内容
      //执行完下面的advance后，html更新了，index参数也更新了
      advance(start[0].length);
	 // 定义end结束标签，attr属性数组
      var end, attr;
      // attr = html.match(dynamicArgAttribute)
      // console.log(attr, 'attr');
      // 当找不到结束标签同时能匹配到属性的时候，即处理属性的逻辑
      // 多个属性的时候会多次进入到这个while循环，直到找到end这个结尾符号，
      // 进入下面的if(end)语句
      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);
      }
      // 将结束标签>的相关信息记录下来
      if (end) {
        match.unarySlash = end[1];
        advance(end[0].length);
        match.end = index;
        // 返回match对象
        return match
      }
    }
  }

将以上所有的代码粘贴到html中script标签中，即可单步调试这个parseStartTag 过程！