前言

前面分析完了如何处理script，现在按照顺序我们来看下是如何处理template的。

坏蛋Dan：vue/compiler-sfc源码分析学习--part2:如何处理script--final章节整理

坏蛋Dan：vue/compiler-sfc源码分析学习2--确认后续分析目标

入口

如果看过我之前的vue-loader源码分析，你应该知道处理这个ast是用的啥--templateLoader识别到.vue&&type=template然后再请求处理。

坏蛋Dan：vue-loader源码分析学习

我们进入到node_modules\vue-loader\dist\templateLoader.js中

代码是tsc编译过的，但是不影响，毕竟不像我们分析的目标--@vue/compiler-sfc那么大。

代码非常简单，调用@vue/compiler-sfc的compileTemplate方法，将源码souce转换成code。

这个code就是render functions，我们来看下最终数据

img_render_functions

这就是我们的最终目标，但它不是现在分析的。我们先跟着我们刚找到的入口compileTemplate去到@vue/compiler-sfc中开启调试之旅。

另外有一点需要注意的，那就是这个时候的script已经处理完了。

是不是和我们刚分析完的script的最终样子差不多？

发布于 2022-12-06 15:34・IP 属地广东