手写Vue2系列编译器

当学习成为习惯，知识就成为常识。感谢您的关注、点赞、收藏和评论。有新视频和文章会第一时间发到微信公众号。欢迎关注：李永宁lyn的文章已收录到github仓库liyongning/blog。欢迎收看星空。前言接下来正式进入手写Vue2系列。这里不会从头开始，而是直接基于lyn-vue升级，所以如果你还没有看过手写Vue系列的Vue1.x，请先从本文开始，按顺序学习。我们都知道Vue1的问题在于大型应用中Watcher过多。不懂原理的可以参考手写Vue系列之Vue1.x。所以在Vue2中引入了VNode和diff算法来解决这个问题。通过降低Watcher的粒度，一个组件对应一个Watcher（渲染Watcher），这样就不会出现大页面上Watcher过多导致性能下降的问题。在Vue1中，Watcher与页面中的响应式数据一一对应。当响应式数据发生变化时，Dep通知Watcher完成相应的DOM更新。但是在Vue2中，一个组件对应一个Watcher。当响应式数据发生变化时，Watcher并不知道响应式数据在组件中的什么位置，那么如何完成更新呢？看了前面的源码系列，大家肯定知道Vue2引入了VNode和diff算法来将组件编译成VNode。每次响应数据发生变化，都会产生一个新的VNode。通过diff算法比较新旧VNode，找出哪里有变化，然后执行相应的DOM操作，完成更新。所以这里大家可以理解，Vue1和Vue2核心数据响应部分其实没有变化，主要变化在编译器部分。目标是完成一个Vue2编译器的简化实现，从字符串模板解析开始，最后得到render函数。当编译器在手写Vue1时，编译器使用DOMAPI来遍历模板的DOM结构。Vue2中不再使用该方法，与官方相同，直接编译组件的模板字符串生成AST。然后从AST生成渲染函数。先备份Vue1的编译目录，然后新建一个编译目录作为Vue2的编译目录mvcompilercompiler-vue1&&mkdircompilermount/src/compiler/index.js/***compiler*/exportdefaultfunctionmount(vm){if(!vm.$options.render){//如果没有提供渲染选项，编译生成渲染函数//获取模板lettemplate=''if(vm.$options.template){//模板existstemplate=vm.$options.template}elseif(vm.$options.el){//有挂载点template=document.querySelector(vm.$options.el).outerHTML//记录挂载点在例如，这个vm.$el=document.querySelector(vm.$options.el)将在._update中使用}//生成渲染函数constrender=compileToFunction(template)//在$options上挂载渲染函数vm.$options.render=render}}compileToFunction/src/compiler/compileToFunction.js/***解析模板字符串以获取AST语法树*从AST生成渲染函数语法树*@param{String}templatetemplatestring*@returnsrenderingFunction*/exportdefaultfunctioncompileToFunction(template){//解析模板并生成astconstast=parse(template)//生成ast以渲染functionconstrender=generate(ast)returnrender}parse/src/compiler/parse.js/***解析模板字符串并生成AST语法树*@param{*}模板模板字符串*@returns{AST}rootast语法树*/exportdefaultfunctionparse(template){//AST对象存储所有未配对的开始标签conststack=[]//最终的AST语法树letroot=nulllethtml=templatewhile(html.trim()){//过滤注释标签if(html.indexOf('')+3)continue}//匹配开始标签conststartIdx=html.indexOf('<')if(startIdx===0){if(html.indexOf('0){//表示开始标签之间有一段文字，在html中找下一个标签的起始位置constnextStartIdx=html.indexOf('<')//如果栈为空，说明这个text不属于任何元素，不处理直接丢掉if(stack.length){//到这里就说栈不为空，然后处理这段文字，放到top的腹部元素processChars(html.slice(0,nextStartIdx))}html=html.slice(nextStartIdx)}else{//表示开始标签不匹配，整个html是一段文字}}returnroot//parseStartTag函数声明//...//声明processElement函数}//processVModel函数声明//...//processVOn函数声明parseStartTag/src/compiler/parse.js/***解析开始标签*例如：...