在前端快速发展的今天,如果不能时刻保持学习就会很快被淘汰。分享一下Vue中模板编译的过程(从源码的角度)。每天进步一点点。
一、图解:
二、文字解释:
1、模板编译的入口函数 compileToFunctions;
2、在 compileToFunctions 函数中,首先判断缓存是否存在编译好的render函数,如果存在直接返回,如果不存在调用 compile 函数开始进行模板编译;
3、在compile 函数中,首先合并选项,将编译过程中遇到的一些错误、警告和提示存储起来,然后调用 baseCompile 函数进行模板编译;
4、在 baseCompile 函数中,首先调用 parse 方法,将html模板转换为AST抽象语法树;然后调用 optimize 方法,对抽象语法树进行优化(标记静态节点,静态根节点,重新渲染的时候不需要再处理静态根节点,它的内容不会改变);最后调用generate 方法,将优化后的抽象语法树转换为字符串形式的js代码。
5、返回到compile 方法中,将存储的错误信息和提示挂载到 compiled 对象并返回;
6、再回到 compileToFunctions 中,调用 createFunction 方法将 compiled 中字符串形式的js代码转化为 render函数,缓存并返回;
7、最后将编译好的render函数挂载到Vue实例的options选项对应的render属性中。
至此,模板编译过程结束,开始调用mount函数渲染DOM。