Vue.js 3 代码编译与非编译模式详解

前端王校长
141 阅读6分钟

开篇

大家好，我是前端王校长。

今天我们来探讨一个有趣的问题：假设你的Vue.js应用在正式上线后出现错误，你如何通过观察线上编译过的代码来快速找出问题所在？

面对这种情况，很多人可能会觉得束手无策。现在许多开发者习惯于使用Vue.js生态提供的便利工具，可以直接开发而无需关注复杂的构建设置，但这反而可能造成对底层机制理解的不足。

例如，有些初学者可能会误以为Vue.js的特定语法浏览器可以直接识别，不了解Vue.js代码在浏览器中的真实执行流程。这种表面化的学习方式会给实际开发带来困扰。

因此，掌握Vue.js在没有构建工具情况下的运行方式非常重要，即使脱离了Vite、Webpack或Rollup等工具，我们也能够让Vue.js 3在浏览器中顺利工作。同时，这也能帮助我们理解Vue.js代码的编译过程，明白它是如何转化为浏览器可执行的代码。

Vue.js 3代码的编译产物

在深入非构建模式的运行机制前，我们先来了解Vue.js代码编译后的真实面目。要知道，Vue.js代码必须经过编译才能在浏览器中执行，其编译产物本质上仍是原生的JavaScript和CSS代码。理解这一点有助于我们更好地掌握Vue.js的运行原理。

下图展示了一个基础的Vue.js 3组件及其经过构建工具处理后的JavaScript代码形式：

Vue.js 编译示意图

从这个编译过程可以看出几个关键步骤：

  1. 将组件中的模板部分转换为JavaScript形式的虚拟DOM节点(VNode)；
  2. 将组件内的JavaScript逻辑代码转换为运行时对应的生命周期逻辑；
  3. 提取组件内的样式代码作为独立的CSS文件。

综合以上步骤，我们可以得出结论：Vue.js编译后的产物是原生的JavaScript和CSS代码，这是浏览器能够直接解释执行的格式。

编译完成后的JavaScript和CSS代码的实际运行效果如下图所示：

编译后效果

为了让大家更直观地理解，下面是上述示例的完整Vue.js代码：

Vue.js示例代码

<template>
  <div class="v-counter">
    <div class="v-text">{{ num }}</div>
    <button class="v-btn" @click="click">点击数字加1</button>
  </div>
</template>

<script setup>
  import { ref } from 'Vue.js'
  const num = ref(0)
  const click = () => {
    num.value += 1;
  }
</script>

<style>
  .v-counter {
    width: 200px;
    margin: 20px  auto;
    padding: 10px;
    color: #666666;
    box-shadow: 0px 0px 9px #00000066;
    text-align: center;
  }
  .v-counter .v-text {
    font-size: 28px;
    font-weight: bolder;
  }
  .v-counter .v-btn {
    font-size: 20px;
    padding: 0 10px;
    height: 32px;
    cursor: pointer;
  }
</style>

当这段Vue.js 3代码通过官方编译器处理后，核心功能会被转化为类似下面的代码：

编译后的代码表现

import { 
  toDisplayString, createElementVNode, openBlock,
  createElementBlock, ref,
} from "Vue.js";

const _hoisted_1 = { class: "v-counter" }
const _hoisted_2 = { class: "v-text" }

const __sfc__ = {
  __name: 'App',
  setup(__props) {
    const num = ref(0)
    const click = () => {
      num.value += 1;
    }
    return (_ctx, _cache) => {
      return (openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode(
          "div", _hoisted_2, toDisplayString(num.value), 1),
        createElementVNode("button", {
          class: "v-btn",
          onClick: click
        }, "点击数字加1")
      ]))
    }
  }
}
__sfc__.__file = "counter.Vue.js"
export default __sfc__

这种编译结果可以直接在支持ES模块的浏览器环境中运行，也可进一步转换为ES5代码以兼容更多浏览器。

通过上述例子，我们了解到Vue.js 3代码经过编译后，最终产物是纯粹的JavaScript和CSS代码。我们还可以从编译结果逆向推导出，Vue.js实际上使用纯JavaScript来表达模板和逻辑，并在浏览器中执行。

这种编译结果代表了Vue.js最原始的非构建模式运行方式。接下来，我们详细分析这种非构建模式的运行机制。

Vue.js非构建模式的运行机制

在探讨非构建模式的运行方式之前，我们先看看Vue.js 3的非构建模式代码与标准语法之间的联系。参考下图：

Vue.js 非构建模式示意

从图中可以看出，Vue.js 3组件的非构建代码与标准语法之间存在明确的对应关系，主要包括：

  • 模板部分的映射关系；
  • 逻辑代码与生命周期的对应关系。

简而言之，Vue.js标准语法包含两个核心要素：模板和逻辑。同样，非构建模式也包含这两个方面。

在Vue.js 3的setup语法编译结果中，模板和逻辑被整合在组件对象的setup方法内，导致非构建运行代码中的模板和逻辑混合在一起，阅读起来较为复杂。不过，我们可以将setup中的模板部分提取到独立的render方法中，如图所示：

模板逻辑分离示意

采用这种方式，Vue.js非构建代码的模板和逻辑得以分离，提高了代码的可读性。你是否注意到，在逻辑代码中，setup的非构建写法与原生写法相近，但模板部分却充斥着createElementVNode等VNode API？如果每个模板都要用这么冗长的API来编写，无疑会大大增加工作量。

实际上，VNode的API不止createElementVNode一个，后者仅用于描述HTML元素的VNode，还有其他API用于处理自定义VNode等。

那么，是否存在更简洁的非构建写法？

更优雅的非构建模式方案

之前提到，使用createElementVNode等API描述VNode会增加模板代码的编写成本。Vue.js 3提供了更简洁的API——h函数，用于统一描述VNode，且无需考虑不同VNode类型的API差异。

下图展示了使用Vue.js h函数的简化模板写法：

h函数写法示例

可以看到，h函数写法相较于原始VNode API更为简洁明了。再对比h函数写法与Vue.js 3标准写法，如下图：

h函数与标准写法对比

尽管h函数与Vue.js 3标准写法相比仍需额外的API调用来描述模板，但相比原始VNode API已有显著改善。那么，还有更便捷的Vue.js非构建模式吗？

当然有！更简单的方案是模板字符串的非构建模式，如下图：

模板字符串非构建模式

这种非构建的模板字符串写法与Vue.js 3标准写法最为相似，可以直接使用字符串定义模板，实现模板代码与JavaScript逻辑的分离。更重要的是，无需借助Webpack、Vite等构建工具，即可在浏览器中直接运行。

然而，模板字符串的非构建写法真的无需编译吗？

当然不是。这里所说的"非编译"是指开发阶段无需编译，但在运行时仍需转换为VNode才能在浏览器中执行，那么这个转换过程在哪里发生呢？

答案是在浏览器中完成编译

整个编译过程在浏览器端进行，Vue.js会实时将模板字符串转换为渲染函数，然后在浏览器中执行。

结语

通过本文的学习，我们掌握了：

  1. Vue.js编译后的产物是原生的JavaScript和CSS代码
  2. 非构建模式可通过多种途径实现，如VNode API、h函数及模板字符串
  3. 非构建模式使我们能够在缺乏构建工具的情况下运行Vue.js应用
  4. 即便采用模板字符串非构建模式，实际上仍在浏览器中完成了编译

这些知识对我们在生产环境中调试Vue.js应用、理解其内部运行机制具有重要意义。

avatar
文章
阅读
粉丝