• 欢迎光临~

vue源码阅读—07—编译原理之编译入口

开发技术 开发技术 2022-08-04 次浏览
src文件夹下的compile模块是公用的,
所以我们通过给createCompiler传递不同的base_options可以获取不同的compile函数;
这就是函数柯里化;
比如一个函数a本来需要接收5个参数,然后a函数先接收1个参数,然后返回一个子函数b,我们使用b函数的时候,再把剩下的4
个参数传递进去;
 
 
通过传递不同的baseOptions,生成了不同的compile函数;
而createCompileToFuntion函数也是需要compile函数作为参数的,所以又生成了不同的compileToFuntions函数;
vue源码阅读—07—编译原理之编译入口

 

 

 

 

https://ustbhuangyi.github.io/vue-analysis/v2/compile/entrance.html#%E6%80%BB%E7%BB%93

编译的入口:

在/entry-runtime-with-compiler.js,通过compileToFuntions方法,把template模板作为参数穿进去,然后通过解构赋值的方法取到render函数;

vue源码阅读—07—编译原理之编译入口

 

那么compileToFuntions这个函数是从哪里获取的?

执行createCompiler方法,createCompile就是src/compiler的公共编译模块,

vue源码阅读—07—编译原理之编译入口

createCompiler函数是通过执行createCompileCreator函数得到的; vue源码阅读—07—编译原理之编译入口

到这里我们就找到了createCompiler函数,执行这个函数就会返回一个对象,对象里有compile方法和compileToFunctions属性。

要注意的是,我们传递的baseOptions不同,compile函数由于会引用baseOptions,所以得到的compile函数也是不同的。

又因为createCompileToFuntions会把compile作为参数即回调函数,所以不同的baseOptions会有不同的createCompileToFunctionFn方法;

vue源码阅读—07—编译原理之编译入口

 

 

 

 

createCompileToFunctionFn函数内部会调用compile函数,compile函数内部会调用baseCompile函数,

baseCompile函数是真正的编译,主要有是三步,

1.将模板编译为ast树

2.optimize,将ast树优化

3.generate,将ast树转化为render函数;

vue源码阅读—07—编译原理之编译入口

 

 

 

 

 

 

程序员灯塔
转载请注明原文链接:vue源码阅读—07—编译原理之编译入口
喜欢 (0)