前言

在和一些同事谈天过程中，我发现咱们好像不知道关于vue的两个编译方法，究竟在业务开发层面上而言，确实在这方面是无感知的。

这儿就趁便分享记录下vue3的两个编译方法

运行时编译 vs 编译器

Vue 3 供给了两种编译方法：运行时编译和编译器。

什么是运行时编译

运行时编译是 Vue 3 的默许编译方法。它运用模板编译器将模板编译成动态烘托函数。运行时编译时，Vue 3 在客户端编译模板，并生成相应的烘托函数，然后在运行时执行烘托函数来生成实际的 DOM 元素。

什么是运用编译器(默许)

编译器是将模板编译为烘托函数的东西。Vue 3 供给了两种编译器：模板编译器和预编译器。

  • 模板编译器: Vue 3 的默许编译器。它在运行时将模板编译为烘托函数。
  • 预编译器: 在构建时将模板预编译为烘托函数，并生成与 Vue 3 运行时彻底兼容的代码。

两种编译方法的差异

两种编译方法有以下差异：

  • 编译时机

运行时编译在客户端编译模板，并生成相应的烘托函数。编译器在构建时编译模板，并生成烘托函数。

  • 所需的构建东西

运行时编译不需求额定的构建东西。编译器需求运用构建东西（例如 webpack）进行构建。

  • 所需的运行时代码

运行时编译需求包括 Vue 3 运行时代码。编译器生成的代码不需求包括 Vue 3 运行时代码。

优缺陷比较

运行时编译的长处是：易于运用、简略、不需求额定的构建东西和依靠。

缺陷是：功能较差、需求包括 Vue 3 运行时代码、开发体会不如编译器。

编译器的长处是：功能更好、不需求包括 Vue 3 运行时代码、更好的开发体会。

缺陷是：需求额定的构建东西和依靠、装备比较费事。

因此，挑选编译方法需求考虑项目需求和优缺陷

功能比较

当挑选运行时编译和编译器时，需求考虑它们在功能上的差异。一般来说，运行时编译比编译器慢，但它的优势在于更灵敏和动态，适用于一些动态的场景，而编译器则更适用于静态的场景。

下面咱们来详细说明一下两种编译方法在功能上的差异：

1、运行时编译

运行时编译是将模板编译成烘托函数并在浏览器中运行，它具有以下长处：

  • 更灵敏：运行时编译能够在运行时依据数据动态编译模板，因此愈加灵敏。
  • 无需预编译：运用运行时编译，咱们不需求事先在构建时预编译模板，这样能够削减构建时间和代码体积。

但运行时编译也存在一些缺陷：

  • 功能差：运行时编译需求在浏览器中动态编译模板，因此功能比较差，特别是当模板杂乱时，烘托速度会受到影响。
  • 调试困难：运行时编译在调试时比较困难，由于它需求在浏览器中动态生成代码。
2. 编译器

编译器是将模板编译成烘托函数的东西，它具有以下长处：

功能好：运用编译器预编译模板能够进步烘托速度，特别是当模板较为杂乱时，能够进步功能。
调试方便：运用编译器预编译模板能够方便调试，由于咱们能够在开发时看到烘托函数的代码。
但编译器也存在一些缺陷：

体积大：运用编译器需求将模板预编译成烘托函数，这会添加代码体积。
不灵敏：编译器生成的烘托函数是静态的，无法在运行时依据数据动态生成。
综上所述，咱们在挑选编译方法时需求依据项目需求和优缺陷进行归纳考虑。

代码比照

运行时编译和编译器在装备上有一些不同，具体如下：

装备比照

运行时编译：运用运行时编译时，不需求特别的装备，只需引入 Vue 的 UMD 版别或 ESM 版别即可。

假如运用的是 Vue CLI 创立的项目，那么默许便是运用运行时编译。

// vite.config.js
import vue from "@vitejs/plugin-vue";
module.exports = {
  plugins: [vue()],
};

编译器：运用编译器时，需求特别装备来预编译模板，具体装备方法取决于所运用的构建东西和模板语言。

// vite.config.js
module.exports = {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'my-component'
        }
      }
    })
  ]
};
开发体会比照
emm…..,说实话，个人感觉，没什么差异

总结

  1. 运行时编译和编译器都有各自的优缺陷，应该依据具体情况挑选适宜的编译方法。
  2. 假如你的应用程序中存在很多动态模板或者需求运用高级模板特性，那么编译器可能更合适你的应用程序。
  3. 假如你的应用程序中只包括一些简略的静态模板，那么运行时编译可能愈加合适你的应用程序。
  4. 运用编译器能够进步应用程序的功能，一起也能够让你在开发过程中运用愈加灵敏的模板语法。
  5. 运用单文件组件能够让你在一个文件中一起编写模板、逻辑和样式，这样能够愈加方便地维护代码。
  6. 在装备上，运用编译器需求指定一些编译选项，这让咱们能够愈加灵敏地定制编译器的行为。

总之，挑选合适自己的编译方法是很重要的。

这需求咱们对自己的项目进行充沛的了解，并依据具体情况做出决策~