Vue解析器概述

研究Vue源码时看到如下这个正则 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/；发现与虚拟dom有关
首先说说解析器，可以将vue的template字符串转换为AST（抽象语法树），所谓AST就是用js对象来描述节点，一个对象为一个节点，通过对象中的children、parent等属性，描述该节点，如此所形成的一个节点数即为AST

例如：如下html

<div>
	<h1>标题</h1>
<div>

解析后为

{
    tag: 'div',
    type: 1,
    staticRoot: false,
    static: false,
    plain: true,
    parent: undefined,
    attrsList: [],
    attrsMap: {},
    children: [
        {
            tag: 'h1',
            type: 1,
            staticRoot: false,
            static: false,
            plain: true,
            parent: {
                tag: 'div',
                ...
            },
            attrsList: [],
            attrsMap: {},
            children: [
                {
                    type: 2,
                    text: '标题',
                    static: false,
                    expression: '_s(name)',
                }
            ]
        }
    ]
}

解析器内部也分为多个解析器，包括HTML解析器、文本解析器、过滤解析器等，HTML解析器作用是解析html，包含了多个钩子函数：

伪代码如下：

parseHTML(template, {
	// 开始标签钩子
    start (tag, attrs, unary) {
        // 每当解析到标签的开始位置时，触发该函数
    },
	
	// 结束标签钩子
    end () {
        // 每当解析到标签的结束位置时，触发该函数
    },
    
    // 文本钩子
    chars (text) {
        // 每当解析到文本时，触发该函数
    },

	// 结束钩子
    comment (text) {
        // 每当解析到注释时，触发该函数
    }

当上面的html被HTML解析器解析时，所触发的钩子函数依次是：start、start、chars、end、end。

因此，我们可以在钩子函数中构建AST节点。在start钩子函数中构建元素类型的节点，在chars钩子函数中构建文本类型的节点，在comment钩子函数中构建注释类型的节点。

当HTML解析器不再触发钩子函数时，就代表所有模板都解析完毕，所有类型的节点都在钩子函数中构建完成，即AST构建完成。

ok，在此不再赘述，详细说明可以查看：https://blog.csdn.net/weixin_33963594/article/details/91422116

回到 unicodeRegExp的解析上：其中\uxxxx是查找以十六进制数 xxxx 规定的 Unicode 字符
那么unicodeRegExp的后半部分就很好理解了，就是在a-zA-Z的基础上增加一些特殊字符，具体是什么字符呢，可以用以下函数来转换，入参时\uxxxx要转换为%uxxxx

function decode(s) {
    return unescape(s.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
}

decode(’(%u00B7)(%u00C0-%u00D6)(%u00D8-%u00F6)(%u00F8-%u037D)(%u037F-%u1FFF)(%u200C-%u200D)(%u203F-%u2040)(%u2070-%u218F)(%u2C00-%u2FEF)(%u3001-%uD7FF)(%uF900-%uFDCF)(%uFDF0-%uFFFD)’)

最终打印结果为：(·)(À-Ö)(Ø-ö)(ø-ͽ)(Ϳ-῿)(‌-‍)(‿-⁀)(⁰-↏)(Ⰰ-⿯)(、-퟿)(豈-﷏)(ﷰ-�)，其中有几个字符不存在，为什么呢，后面再慢慢研究吧：）