什么?你的简历Vue技能竟然还不是精通？

站长

2023年08月29日 16:32 · 阅读数 14

前言

付出时间和汗水, 其余交给天意。

现在笑的有多欢，未来就有多惨。

时刻保持紧张和焦虑未必是件坏事。

在这场血雨腥风的战场上，我相信会有曙光降临！

长文预警 , 建议掘友们去githubDownload一份源码，建议边review代码边阅读

直接进入主题~

1. Vue中的模板编译是如何实现的？

这个问题主要考察的Vue编译器的理解

大致流程如下：

模板字符串 -> 解析器 -> AST -> 优化器 -> AST -> 代码生成器 -> 渲染函数

从开始的模板字符串到渲染函数中间经历了什么？

platforms有多个入口文件,这里从entry-runtime-with-compiler.js=>vue.js分析

这里必须抛开VueCli脚手架，首先分析模板字符串：

<div id="app">  
***  
</span>  
</div>
var app = new Vue({  
el: '#app',  
})
________________________________
Vue.component('comp', {  
template: '<li>test</li>'  
})

在entry-runtime-with-compiler.js文件中$options.template或者query(el)获取模板字符串和DOM对象。

到解析器阶段，它的作用就是将模板字符串解析为AST。

这一切的起点都从createCompiler函数开始：

function createCompilerCreator(baseCompile) {
  return function createCompiler(baseOptions) {
    function compile(template, options) {
      // ...
    }
    return {
      compile,
      compileToFunctions
    };
  };
}

createCompilerCreator利用了柯里化函数的，灵活传递baseOptions参数，同时将编译过程compile函数抽离。

entry-runtime-with-compiler.js调用compileToFunctions最终执行compile(template, options)同时调用baseCompile函数，此时进入template解析阶段即parse函数，其最终返回为AST语法树。

export function parseHTML (html, options) {

    const stack = []
    const expectHTML = options.expectHTML
    const isUnaryTag = options.isUnaryTag || no
    const canBeLeftOpenTag = options.canBeLeftOpenTag || no
    let index = 0
    let last, lastTag
    while (html) {...}
    parseEndTag()
    function advance (n) {...}
    function parseStartTag () {...}
    function handleStartTag (match) {...}

    function parseEndTag (tagName, start, end) {...}
}

最终parseHTML函数来解析模板字符串，感觉面试官不会问具体解析细节，如果问可以这样回答，

在解析过程中，每当解析到一个开始标签时，就会将该标签压入一个栈中，同时创建一个 AST 元素节点，并将该节点作为当前节点的子节点；
每当解析到一个结束标签时，就会将该标签与栈顶的开始标签匹配，然后将栈顶的开始标签与对应的 AST 元素节点从栈中弹出，并将当前节点设置为栈顶元素的父节点。
当解析完成后，就会返回生成的 AST。

{
  tag: 'div',            // 标签名
  data: {},              // 节点的属性和指令
  children: [],          // 子节点数组
  text: '',              // 文本内容
  elm: null,             // 关联的真实 DOM 元素
  context: null,         // 组件实例
  key: undefined         // 唯一键值
  ...
}

接下来到优化器阶段，回到baseCompile函数，进入到optimize函数，该优化过程包含两个部静态节点标记、静态属性提升

 markStatic(root)
 markStaticRoots(root, false)

markStatic(1)遍历AST节点判断是否为静态节点，通过递归调用的形式进行标记。这样有助于提高组件的渲染性能，因为它们的值在渲染过程中不会发生变化，可以被视为常量，从而减少了对虚拟 DOM 的比对和重新渲染的开销，提升了性能。

markStaticRoots(2)静态属性指的是不需要在渲染过程中改变的属性，通过递归调用的形式遍历AST判断当前节点是否为静态节点，如果是则将其所有静态属性提取出来，生成一个单独的对象。这样可以避免在后续更新过程中重新生成这些属性，提高性能。

可以这样回答：

optimize,主要是从静态节点标记和静态属性提升两方面优化,将(1),(2)合并

接着到代码生成器,继续回到createCompiler函数中,进入到generate函数。在上面的优化阶段完成之后，该函数会将AST转换为可执行的渲染函数render。