都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？

前言

在写vue3编译原理揭秘电子书的时候，发现有不少粉丝还傻傻分不清楚什么是编译时？什么是运行时？这篇文章我们来让你彻底搞清楚编译时和运行时的区别。

欧阳平时写文章参考的多本vue源码电子书、加入欧阳的第一个vue源码交流群

编译时

我将编译这个词语理解为翻译，这句话是什么意思呢？

比如你要和一个老外沟通，你的英文超级烂。所以你说的是中文，老外却只理解英文。那你们两个人怎么沟通呢？所以你需要一个翻译器来将你说的中文转换为英文，这样老外就能理解你说的话了，这个翻译过程就是我们常说的编译时。

看完上一个例子如果你还没理解的话，我们再来看一个vue的例子。我们平时写vue代码时一般都是写在文件后缀名为.vue文件中，也就是官方说的单文件组件 (SFC)。

但是浏览器认识后缀为.vue的单文件组件 (SFC)吗？

很明显浏览器是不认识的，所以这个时候需要将后缀为.vue的单文件组件 (SFC)编译（翻译）为浏览器认识的js文件，这一过程就是我们常说的编译时。

在前端中，一般来说编译时就是