01｜编译和非编译模式：离开Vue工具，你还知道怎么用Vue 3吗？-Vue3企业级项目实战 - 码小课 - 程序员在线学习平台

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

### 01｜编译和非编译模式：离开Vue工具，你还知道怎么用Vue 3吗？

在Vue.js的广阔生态中，从初学者到资深开发者，Vue CLI、Vite等现代前端构建工具极大地简化了项目的搭建、依赖管理和打包流程。然而，当我们深入探讨Vue 3的底层机制或面临特殊场景（如直接在CDN上引入Vue而无需构建过程），了解Vue的编译与非编译模式就变得尤为重要。本章将深入探讨Vue 3在不依赖构建工具的情况下，如何直接使用其运行时版本与编译时版本，以及这两种模式在实际应用中的差异与选择策略。

#### 一、Vue 3的发布与核心变化

首先，让我们简要回顾Vue 3的主要变化。Vue 3带来了Composition API这一重大更新，它提供了一种更灵活、更函数式的方式来组织组件逻辑，同时保持了Options API的兼容性。此外，Vue 3还优化了内部实现，提升了性能，引入了Proxy作为响应式系统的基石，解决了Vue 2中Object.defineProperty的一些限制。

#### 二、Vue 3的编译与非编译模式概述

Vue 3的源码发布时，通常包含两个主要版本：**运行时版（Runtime-only）**和**编译器版（Compiler + Runtime）**。

- **运行时版（Runtime-only）**：这个版本的Vue不包含模板编译器。它假设你的模板已经被编译成渲染函数（render functions）。这种模式下，Vue更加轻量，因为移除了模板到虚拟DOM的编译过程。但是，这也意味着你不能直接在Vue组件中使用字符串模板（即`<template>`标签内的HTML字符串）。

- **编译器版（Compiler + Runtime）**：这个版本则包含了完整的Vue，包括模板编译器。它允许你在Vue组件中直接使用字符串模板，Vue会在内部将这些模板编译成渲染函数。这使得开发过程更加便捷，因为你无需预先编译模板。然而，这也意味着打包后的文件体积会相对较大，因为包含了额外的编译代码。

#### 三、非编译模式下使用Vue 3

在非编译模式下使用Vue 3，主要依赖于预先编译好的模板或直接使用渲染函数。这里有几个关键点需要注意：

##### 1. 使用JSX或TSX

JSX/TSX是JavaScript/TypeScript的XML语法扩展，允许你在JavaScript代码中写类似HTML的标记。虽然Vue官方没有直接支持JSX，但社区提供了诸如`@vue/babel-plugin-jsx`这样的插件，使得在Vue项目中也能方便地使用JSX。这种方式下，你实际上是在编写渲染函数，但语法更接近于HTML，便于阅读和维护。

```jsx
// 假设你使用了一个支持JSX的Vue插件
export default {
  setup() {
    return () => (
      <div>
        <h1>Hello, Vue 3 with JSX!</h1>
      </div>
    );
  }
};
```

##### 2. 渲染函数

渲染函数是Vue组件的核心，它直接返回描述组件输出的虚拟DOM。在不使用模板编译器的情况下，你可以直接在组件的`setup`函数中返回渲染函数。

```javascript
export default {
  setup() {
    return () => h('div', [h('h1', 'Hello, Vue 3!')]);
  }
};

// 注意：这里使用了Vue 3的`h`函数来创建虚拟DOM节点
// `h`函数是Vue 3中引入的，用于替代Vue 2中的`createElement`
```

##### 3. 预编译模板

如果你的Vue组件使用字符串模板，但又想在不包含编译器的Vue版本中运行，你需要在构建过程中提前将这些模板编译成渲染函数。这通常是通过构建工具（如Webpack配合vue-loader）自动完成的。但如果你没有使用这些工具，你可能需要手动或通过其他方式（如使用Vue CLI的`vue-template-compiler`）来预编译模板。

#### 四、编译模式下使用Vue 3

在编译模式下，Vue 3的使用与大多数开发者日常所见的场景相似，即通过Vue CLI、Vite等构建工具创建项目，并在组件中使用`<template>`标签定义模板。

```vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

在这种情况下，Vue CLI或Vite等构建工具会在构建过程中自动处理模板的编译，将`<template>`标签中的HTML字符串转换为JavaScript的渲染函数。

#### 五、选择编译模式还是非编译模式？

- **如果你正在开发一个库或框架，并希望保持最大的灵活性和轻量级，可能会倾向于使用运行时版Vue，并鼓励用户通过预编译模板或直接使用渲染函数来定义组件。**

- **对于大多数应用来说，使用编译器版Vue会更加方便，因为它允许你在组件中直接使用`<template>`标签，减少了编写渲染函数的复杂性。**

- **在性能敏感或需要极致优化的场景下，可能需要仔细评估是否可以通过使用运行时版Vue和预编译模板来减少最终打包体积。**

#### 六、结论

了解Vue 3的编译与非编译模式不仅有助于你更深入地理解Vue的工作原理，还能在特定场景下帮助你做出更合适的技术选型。无论是选择轻量级的运行时版Vue还是便捷的编译器版Vue，关键在于理解你的项目需求，并据此做出最合适的选择。随着Vue生态的不断发展，这些基础概念的理解将成为你深入探索Vue世界的坚实基石。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(五)

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(二)

vuejs组件实例与底层原理精讲

Vue原理与源码解析

Vue.js从入门到精通(二)

Vue源码完全解析

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(三)

TypeScript和Vue从入门到精通(四)

Vue3技术解密

Vue面试指南