跳至主要內容

Vue 3 文档

2025/8/24大约 9 分钟

Vue 3 文档

介绍

Vue 3是Vue.js框架的重大升级版本，由尤雨溪及其团队开发，于2020年9月正式发布。这个版本带来了许多激动人心的新特性和性能优化，包括基于Proxy的响应式系统、组合式API、更好的TypeScript支持等。本专项技术文档将带你深入了解Vue 3的核心概念、API和最佳实践，帮助你快速掌握Vue 3开发，并能够应用于实际项目中。

Vue 3的设计理念是"渐进式框架"，这意味着你可以根据需要逐步采用其功能，而不必一次性全部掌握。无论你是刚开始学习前端开发，还是有经验的开发者想要升级技能，Vue 3都是一个值得学习的优秀框架。

为什么选择Vue 3

Vue 3是Vue.js框架的重大升级版本，带来了许多激动人心的新特性和性能优化，使其在众多前端框架中脱颖而出。以下是选择Vue 3的主要原因：

1. 卓越的性能表现

Vue 3的响应式系统进行了彻底重写，使用ES6的Proxy API代替了Vue 2中的Object.defineProperty。这一改进带来了以下优势：

  • 更高效的响应式追踪，避免了Vue 2中的依赖收集问题
  • 支持数组索引和对象属性的动态添加/删除
  • 更好的性能，特别是在大型应用中

此外，Vue 3的虚拟DOM算法也进行了优化，引入了区块树(Block Tree)和静态提升等技术，使渲染性能提升了20%-50%。

2. 更小的打包体积

Vue 3通过tree-shaking技术实现了更高效的按需加载。相比Vue 2，相同功能的情况下，Vue 3的打包体积减少了约40%。这意味着：

  • 更快的页面加载速度
  • 更低的带宽消耗
  • 更好的用户体验，尤其是在移动设备上

3. 灵活的组合式API

Vue 3引入了全新的组合式API(Composition API)，与Vue 2的选项式API(Options API)相比，它提供了：

  • 更灵活的代码组织方式，使相关逻辑可以更好地聚合
  • 更好的代码复用能力，通过自定义Hook实现
  • 更清晰的类型推断，便于与TypeScript集成
  • 更适合处理复杂组件的逻辑

4. 完善的TypeScript支持

Vue 3的源码完全使用TypeScript重写，提供了更完善的类型定义。这使得：

  • 开发过程中能够获得更好的IDE支持（如代码补全、类型检查）
  • 减少运行时错误
  • 提高代码质量和可维护性

5. 强大的新特性

Vue 3引入了许多实用的新特性，解决了Vue 2中存在的一些痛点：

  • <Teleport>：允许将组件渲染到DOM中的任何位置
  • <Suspense>：处理异步组件的加载状态
  • 多根节点组件：不再需要一个根元素包裹所有内容
  • 片段(Fragments)：减少不必要的DOM嵌套
  • 自定义渲染器：更容易实现跨平台渲染

6. 良好的向后兼容性

尽管Vue 3带来了许多变化，但它仍然保持了对Vue 2的良好向后兼容性。你可以：

  • 继续使用Vue 2的选项式API
  • 逐步迁移现有项目到Vue 3
  • 在同一个项目中混合使用选项式API和组合式API

这些优势使Vue 3成为构建现代Web应用的理想选择，无论是小型项目还是大型企业应用。

环境搭建

要开始使用Vue 3开发，你需要准备好相应的开发环境。以下是详细的步骤指南：

前提条件

在开始之前，请确保你已经具备以下条件：

  • 基本的HTML、CSS和JavaScript知识
  • 安装Node.js (推荐16.0.0及以上版本)。你可以通过Node.js官网下载并安装。
  • 安装npm、yarn或pnpm包管理器。Node.js通常会自带npm，但你也可以根据喜好安装其他包管理器。
  • 一个现代的代码编辑器，如Visual Studio Code、WebStorm等。推荐使用Visual Studio Code并安装Vue相关扩展（如Volar）。

检查Node.js和npm版本

安装完成后，你可以通过以下命令检查Node.js和npm的版本：

node -v
npm -v

如果显示的版本符合要求，你就可以继续下一步了。

安装Vue 3

有几种方式可以开始使用Vue 3，选择最适合你的方式：

1. 使用CDN

对于简单的示例或学习目的，最简单的方式是通过CDN引入Vue 3：

<!-- 开发环境版本，包含完整的警告和调试模式 -->
<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://unpkg.com/vue@next"></script>

你可以直接在HTML文件中使用这些脚本标签，然后在全局作用域中使用Vue。

2. 使用Vite (推荐)

Vite是Vue的作者尤雨溪开发的新一代构建工具，为Vue 3提供了极佳的开发体验。使用Vite创建Vue 3项目的步骤如下：

# 安装Vite并创建Vue 3项目
npm init vite@latest my-vue3-app -- --template vue

# 进入项目目录
cd my-vue3-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

Vite会自动配置好开发环境，包括热模块替换、代码分割等高级特性。

3. 使用Vue CLI

如果你熟悉Vue CLI，也可以使用它来创建Vue 3项目：

# 确保Vue CLI版本是4.5.0及以上
npm install -g @vue/cli

# 创建Vue 3项目
vue create my-vue3-app

# 在创建过程中选择Vue 3预设

常见问题解决

在环境搭建过程中，你可能会遇到一些问题。以下是一些常见问题的解决方案：

  1. Node.js版本过低：升级Node.js到推荐版本。
  2. npm安装速度慢：可以使用淘宝镜像或切换到yarn/pnpm。
    # 使用淘宝镜像
npm config set registry https://registry.npm.taobao.org

# 安装yarn
npm install -g yarn
  3. Vite启动失败：确保你的网络连接正常，尝试删除node_modules目录并重新安装依赖。
  4. 编辑器没有语法高亮：安装Vue相关扩展，如Volar（Vue 3推荐）或Vetur（Vue 2）。

推荐的开发工具

  • 编辑器：Visual Studio Code
  • 扩展：Volar (Vue 3)、ESLint、Prettier
  • 浏览器扩展：Vue Devtools (支持Vue 3)

设置好开发环境后，你就可以开始Vue 3的学习和开发之旅了！

第一个Vue 3应用

现在你已经搭建好了开发环境，让我们创建你的第一个Vue 3应用。这个简单的应用将展示Vue 3的核心特性，包括响应式数据、事件处理和组件样式。

基本示例

下面是一个简单的Vue 3应用示例：

<template>
  <div class="hello-vue">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">更改消息</button>
    <p>点击次数: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 使用ref创建响应式数据
const message = ref('你好，Vue 3!')
const count = ref(0)

// 定义方法
const changeMessage = () => {
  message.value = '欢迎来到Vue 3的世界！'
  count.value++
}
</script>

<style scoped>
.hello-vue {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  color: #42b983;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3aa876;
}

p {
  margin-top: 20px;
  color: #666;
}
</style>

代码解释

这个示例包含三个主要部分：模板(template)、脚本(script)和样式(style)。

模板部分

<template>
  <div class="hello-vue">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">更改消息</button>
    <p>点击次数: {{ count }}</p>
  </div>
</template>
  • <template>标签包含了组件的HTML结构
  • {{ message }}和{{ count }}是插值表达式，用于显示响应式数据
  • @click="changeMessage"是事件监听，当按钮被点击时调用changeMessage方法

脚本部分

<script setup>
import { ref } from 'vue'

// 使用ref创建响应式数据
const message = ref('你好，Vue 3!')
const count = ref(0)

// 定义方法
const changeMessage = () => {
  message.value = '欢迎来到Vue 3的世界！'
  count.value++
}
</script>
  • script setup是Vue 3.2+引入的语法糖，简化了组合式API的使用
  • import { ref } from 'vue'导入了ref函数，用于创建响应式数据
  • const message = ref('你好，Vue 3!')创建了一个初始值为'你好，Vue 3!'的响应式数据
  • const count = ref(0)创建了一个初始值为0的响应式计数器
  • changeMessage方法修改了message的值并增加了count
  • 注意：访问和修改ref创建的响应式数据时，需要使用.value属性

样式部分

<style scoped>
.hello-vue {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
/* 其他样式... */
</style>
  • scoped属性表示这些样式只应用于当前组件
  • 这里定义了组件的布局、颜色和交互效果

运行应用

如果你使用Vite创建的项目，可以通过以下命令运行应用：

npm run dev

然后在浏览器中访问 http://localhost:5173/ (端口可能会有所不同)，你将看到你的第一个Vue 3应用。点击按钮，消息会改变，并且点击次数会增加。

进一步学习

这个简单的示例展示了Vue 3的一些基本特性。在后续章节中，我们将深入学习：

  • Vue 3的基本概念和模板语法
  • 响应式系统和组合式API
  • 组件开发和通信
  • 路由和状态管理
  • 高级特性和最佳实践

现在，让我们继续学习Vue 3的基本概念和语法。


## 文档结构

本文档将按照以下结构组织：

1. **基础篇**：Vue 3的基本概念和使用方法
2. **组件篇**：组件的创建、通信和复用
3. **响应式篇**：深入理解Vue 3的响应式系统
4. **组合式API篇**：掌握Vue 3的新特性Composition API
5. **高级篇**：动画、过渡、表单处理等高级特性
6. **实战篇**：通过实际项目巩固所学知识

## 开始学习

让我们开始Vue 3的学习之旅吧！点击下方链接继续学习：

- [基础篇：Vue 3的基本概念](basics.md)
- [组件篇：创建和使用组件](components.md)
- [响应式篇：理解响应式系统](reactivity.md)
- [组合式API篇：Composition API详解](composition-api.md)
默认页脚