个人中心
文章发布
退出
作者热门文章
- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框，下拉多选树，多级节点
- 【学习笔记】基础数据结构：猫树
72
4
在写vue3编译原理揭秘电子书的时候，发现有不少粉丝还傻傻分不清楚什么是编译时？什么是运行时？这篇文章我们来让你彻底搞清楚编译时和运行时的区别.
关注公众号：【前端欧阳】，给自己一个进阶vue的机会 。
我将编译这个词语理解为翻译，这句话是什么意思呢?
比如你要和一个老外沟通，你的英文超级烂。所以你说的是中文，老外却只理解英文。那你们两个人怎么沟通呢？所以你需要一个翻译器来将你说的中文转换为英文，这样老外就能理解你说的话了，这个翻译过程就是我们常说的编译时.
看完上一个例子如果你还没理解的话，我们再来看一个vue的例子。我们平时写vue代码时一般都是写在文件后缀名为.vue文件中，也就是官方说的单文件组件 (SFC).
但是浏览器认识后缀为.vue的单文件组件 (SFC)吗?
很明显浏览器是不认识的，所以这个时候需要将后缀为.vue的单文件组件 (SFC)编译（翻译）为浏览器认识的js文件，这一过程就是我们常说的编译时.
在前端中，一般来说编译时就是代码跑在node.js的阶段.
大家都知道前端主要分为两个环境：生产环境和开发环境.
对于生产环境来说，编译时就是在执行类似yarn build之类的命令，将源代码打包成浏览器可直接执行的代码这一过程。打包生成的代码文件是存在磁盘中，这一过程是在node.js中完成的.
对于开发环境来说，编译时就是在执行类型yarn dev这种启动命令，同样将源代码编译成浏览器可直接执行的代码这一过程。和生产环境不同的是生成的代码文件是存在内存中，并不会写到磁盘中，同样这一过程是在node.js中完成的.
还是以vue举例，大家都知道浏览器的渲染过程是将一个html文件渲染到页面上的。在SPA单页面中浏览器接收到的index.html一般是下面这样的，如下图:
从上图中可以看到接收到的html文件中只有一个<div id="app"></div>，那么浏览器又是怎么从这个空div渲染成丰富多彩的页面呢?
熟悉vue源码的同学应该比较清楚，首先是生成一个app对象，然后调用app对象的mount方法将经过编译时处理后拿到的vue组件对象挂载到<div id="app"></div>上面。这一过程就是所谓的运行时.
对于前端来说，运行时就是代码执行在浏览器的阶段.
看到这里有的小伙伴会有疑惑了，vue好像还提供了一种全局构建的版本。在这个版本中我们可以直接在html文件中使用vue，无需使用webpack或者vite这种打包工具打包。比如下面这样:
从上图中可以看到，这种用法中除了将*.vue文件名替换为*.html文件名之外，其他的写法基本是一模一样的。在这种用法中由于没有使用到构建工具webpack或者vite，当然就没有在node.js中执行的编译时，那么这种用法中浏览器又是如何识别单文件组件 (SFC)中的<template>、<script> 和 <style>等模块呢?
答案是在这种全局构建版本的vue中会内置一个编译器。在浏览器中运行时如果发现了<template>、<script> 和 <style>等模块的代码就会使用内置的编译器将这些模块编译成浏览器可执行的代码.
所以我们前面才会讲：一般来说编译时就是代码跑在node.js的阶段。不一般的情况就是现在这种情况，vue直接内置了一个编译器，在浏览器中进行编译。但是话说回来，这种在浏览器中编译的模式，性能肯定不如使用构建工具webpack或者vite提前将资源进行打包.
一般情况下编译时就是代码跑在node.js的阶段，比如执行yarn dev或者yarn build时代码在node.js中执行的阶段。后面我们又讲了运行时实际就是代码在浏览器中执行的阶段.
最后我们又讲了还有一种特殊的情况，像全局构建版本的vue中会内置一个编译器。让我们可以脱离webpack或者vite使用vue，这种情况就是在浏览器中进行编译的模式，当然这种模式的性能肯定不如使用构建工具webpack或者vite提前将资源进行打包.
关注公众号：【前端欧阳】，给自己一个进阶vue的机会 。
最后此篇关于都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？的文章就讲到这里了,如果你想了解更多关于都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
72
4
0
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目？ 在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易，但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything)，但是 gcc 会发出错误。 #include #include #include using namespace
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库，其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时，我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET，但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
我正在(重新)学习编程，我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。 这个例子: #include #include #in
我有一个项目，必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法，以便 src/main/java 使用 jdk 1.4 编译，但
我想了解 PHP 编译过程是如何工作的。 假设我有一个名为funcs.php 的文件并且这个文件有三个函数，如果我include 或require 它，所有的在文件加载期间编译三个函数？或者源代码会被
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment)，集成开发环境可以极大地方便我们程序员编写程序，但是配置起来
当我编写一些 Scala 代码时，在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义，但仍然显示了错误)。 scala> :paste // Ent
我正在编译一个 SCSS 文件，它似乎删除了我的评论。我可以使用什么命令来保留所有评论？ >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
当您编译 grails war 时，我知道 .groovy 代码被编译为字节码类文件，但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗？安装在服务器上的
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么？谢谢! 文件:calcPi.c
我尝试使用 LD_PRELOAD 来 Hook sprintf function ，所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。 阅读documentation但仍然很难得到我想要的东西。 我需要它来监视文件夹 src/ 中的任何 *.coffee 文
我想使用定制waveformjs 。我发现this on SO但是，我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改，但是我不知道如何将其转换为 .js 文件。 最佳答案 为了
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我是一名优秀的程序员,十分优秀！