初识Vue 3

想象你正在为公司装修一间新办公室。你可以选择买一整套固定家具（一体式方案，搬进来就能用，但很难调整布局），也可以选择模块化家具系统——先搬进核心的办公桌，等团队扩大了再添加会议桌、储物柜、休闲区。Vue 3 就像后者：它是一套渐进式的前端框架，你可以从最轻量的方式开始使用，随着项目复杂度的增长，再逐步引入路由、状态管理、服务端渲染等能力。

这一章，我们将站在一个真实的技术决策场景出发——假设你的团队要为公司启动一个全新的 Web 项目，需要选定前端技术栈。我们将一起回答：为什么 Vue 3 值得成为你的首选？

📋 自测清单（开始学习前，试着回答以下问题，学完本章后再回来验证）

“渐进式框架”与”全家桶框架”在项目引入方式上有什么本质区别？

Vue 3 的响应式系统为什么从 Object.defineProperty 切换到了 Proxy？这解决了什么问题？

组合式 API（Composition API）与选项式 API（Options API）各自适合什么规模的项目？

一、Vue 3 是什么——理解渐进式框架的设计哲学

1.1 一个框架选型的真实场景

假设你是一家中型互联网公司的前端负责人，产品经理刚刚提交了一个新需求：构建一套在线书店管理系统。系统第一期只需要展示书籍列表和简单的搜索功能，但后续会逐步加入购物车、用户系统、后台管理面板，甚至可能需要服务端渲染来优化 SEO。

面对这个需求，你需要选一个前端框架。市面上主流的三大选择摆在面前：Vue、React、Angular。它们各自的定位是什么？

1.2 三大框架的差异化定位

维度	Vue 3	React	Angular
设计理念	渐进式——按需引入	库（Library）——专注视图层	全功能平台——开箱即用
学习曲线	平缓，模板语法直觉性强	中等，JSX 需要适应期	陡峭，概念体系庞大
模板方式	基于 HTML 的模板 + 可选 JSX	JSX 为主	基于 HTML 的模板
状态管理	Pinia（官方推荐）	Redux / Zustand / Jotai 等	内置 Service + RxJS
TypeScript 支持	原生支持，源码用 TS 编写	社区支持良好	原生强制使用 TS
适用场景	从小型到大型均可渐进扩展	大型应用、跨平台（React Native）	企业级大型应用

Vue 3 的核心哲学可以用一句话概括：你可以只用你需要的部分。对于上面的书店项目，第一期你可以只用 Vue 的核心库渲染页面，第二期加入 Vue Router 处理路由，第三期引入 Pinia 管理全局状态——每一步都是自然的增量，而不需要在项目启动时就背负整个技术栈的学习成本。

🤔 思考题：如果你的项目从第一天起就确定要做一个复杂的企业 ERP 系统，Angular 的”全家桶”模式会不会比 Vue 的渐进式更有优势？为什么？

二、Vue 3 核心特性——引擎盖下的四大升级

当你打开一辆车的引擎盖，你会看到发动机、变速箱、冷却系统等核心部件。Vue 3 相对于前代版本，做了一次彻底的”引擎重造”。我们来逐一了解这些关键升级。

2.1 组合式 API（Composition API）

在 Vue 2 时代，我们使用选项式 API（Options API）来组织组件代码：数据放 data，计算属性放 computed，方法放 methods，生命周期各有对应的钩子。这种方式在简单组件中非常直观，但当一个组件承载多个业务逻辑时，同一个功能的代码会被打散到不同的选项中，维护起来就像在一本书里翻来翻去找散落的章节。

组合式 API 的设计理念是：让相关的逻辑代码聚合在一起。通过 setup() 函数（或 <script setup> 语法糖），你可以把一个功能的响应式数据、计算属性、方法、生命周期钩子都写在一处，还可以轻松地将它抽取成可复用的”组合函数”（Composable）。

选项式 API 的代码组织：             组合式 API 的代码组织：
┌──────────────────┐            ┌──────────────────┐
│ data:            │            │ // 功能 A         │
│   功能A数据       │            │   数据 + 方法     │
│   功能B数据       │            │   计算属性        │
│   功能C数据       │            │   生命周期钩子    │
├──────────────────┤            ├──────────────────┤
│ computed:        │            │ // 功能 B         │
│   功能A计算       │            │   数据 + 方法     │
│   功能B计算       │            │   计算属性        │
├──────────────────┤            ├──────────────────┤
│ methods:         │            │ // 功能 C         │
│   功能A方法       │            │   数据 + 方法     │
│   功能B方法       │            │   生命周期钩子    │
│   功能C方法       │            │                  │
└──────────────────┘            └──────────────────┘

2.2 基于 Proxy 的响应式系统

Vue 2 使用 Object.defineProperty 来拦截对象属性的读取和设置，从而实现响应式。但这个 API 有先天的局限性：

无法检测对象属性的新增和删除（所以 Vue 2 需要 Vue.set() 这样的特殊 API）
无法原生监听数组索引变化和 length 属性
需要递归遍历对象的每个属性进行劫持，初始化性能开销大

Vue 3 改用 ES6 的 Proxy 来实现响应式。Proxy 是一个代理层，可以拦截对象上几乎所有操作——读取、设置、删除、枚举……这意味着：

新增属性自动具备响应式，不需要特殊 API
数组的变动可以被完整捕获
采用惰性劫持策略（只在访问嵌套属性时才递归），初始化更快

2.3 Tree-shaking 友好的架构

Vue 2 的运行时是一个整体——即使你没有用到 <transition>、v-model 等功能，它们的代码仍然会被打包进最终产物中。

Vue 3 将内部功能模块化，所有的 API 都通过具名导出（named export）的方式提供。打包工具（如 Vite、Webpack）可以通过静态分析，自动移除你没有使用的代码。这就是 Tree-shaking——像摇树一样把枯枝（未使用的代码）摇下来。

实际效果：一个最小的 Vue 3 应用打包后的运行时体积约为 18–20KB（gzip，具体取决于是否关闭 Options API 兼容层等配置），关闭兼容层后最小约 18.3KB（gzip）。作为对比，Vue 2 的最小运行时约为 23KB。

2.4 Teleport 与 Suspense

Teleport（传送门）解决了一个常见的 UI 问题：有些组件（如模态框、通知提示、全局加载遮罩）虽然在逻辑上属于某个子组件，但在 DOM 结构上需要渲染到 <body> 下或其他特定位置。Teleport 让你可以在不破坏组件逻辑层级的情况下，将 DOM 内容”传送”到指定目标节点。

Suspense（悬停）则提供了一种优雅的方式来处理异步组件的加载状态。你可以为异步组件定义”加载中”和”加载完成”两种状态的模板，Vue 会自动在合适的时机进行切换，不再需要手动管理 loading 标志位。需要注意的是，<Suspense> 目前仍是实验性功能，其 API 可能在未来版本中发生变化。

🤔 思考题：在你过去的项目中，模态框的 DOM 位置问题是怎么解决的？如果没有 Teleport，你通常需要做哪些额外工作？

三、Vue 3 生态全景——不只是一个框架

选择一个前端框架，不仅是选择框架本身，更是选择它背后的整个工具链和社区生态。Vue 3 拥有一套成熟且高度协同的官方及社区生态系统。

3.1 官方核心库

工具	职责	说明
Vue Router	路由管理	支持 History / Hash 模式，动态路由，导航守卫，路由懒加载
Pinia	状态管理	Vue 3 官方推荐的状态管理库，取代 Vuex，API 更简洁，完美支持 TypeScript
Vue DevTools	调试工具	浏览器扩展，可视化查看组件树、状态、路由、Pinia store、性能分析

3.2 构建工具：Vite

Vite 是由 Vue 团队打造的下一代前端构建工具。它的核心优势在于：

极速冷启动：开发服务器基于原生 ES Module，不需要在启动时打包所有文件
即时热更新（HMR）：模块修改后毫秒级生效，且更新速度不会随项目规模增大而变慢
统一构建引擎 Rolldown：Vite 8（2026 年 3 月发布）起默认使用 Rolldown——一个基于 Rust 的高性能打包器，同时服务于开发和生产环境，替代了之前 esbuild（开发）+ Rollup（生产）的双引擎架构，兼具 Rollup 的成熟插件生态与显著更快的构建速度，支持代码分割和 Tree-shaking

传统的打包工具（如 Webpack）在启动时需要分析整个依赖图并打包所有模块，项目越大启动越慢。Vite 反其道而行之——开发时完全不打包，浏览器请求哪个模块就按需编译哪个模块。这种”按需编译”的思路让开发体验有了质的飞跃。

3.3 全栈框架：Nuxt 3

如果你的项目需要服务端渲染（SSR）、静态站点生成（SSG）、或者 API 路由等全栈能力，Nuxt 3 是基于 Vue 3 的最佳选择。它提供了：

基于文件系统的自动路由
服务端渲染 & 静态生成
自动导入组件和组合函数
内置 API 层（Nitro 引擎）

3.4 UI 组件库

库名	定位	特点
Element Plus	桌面端 UI 库	Vue 生态最流行的 PC 端组件库，适合中后台管理系统
Naive UI	桌面端 UI 库	全 TypeScript 编写，主题定制能力强，组件质量高
Ant Design Vue	桌面端 UI 库	遵循 Ant Design 设计规范，适合企业级应用
Vant	移动端 UI 库	轻量高性能，适合移动端 H5 和小程序

Vue 3 生态全景图：

                         ┌─────────────┐
                         │   Vue 3 核心  │
                         └──────┬──────┘
              ┌─────────────────┼─────────────────┐
              ▼                 ▼                  ▼
       ┌──────────┐     ┌──────────┐       ┌──────────┐
       │Vue Router│     │  Pinia   │       │ DevTools  │
       └──────────┘     └──────────┘       └──────────┘
              │                 │
              ▼                 ▼
       ┌──────────┐     ┌──────────────┐
       │  Nuxt 3  │     │  UI 组件库    │
       └──────────┘     │ Element Plus │
              │         │  Naive UI    │
              ▼         │  Vant        │
       ┌──────────┐     └──────────────┘
       │  Nitro   │
       └──────────┘
              │
              ▼
       ┌──────────┐
       │   Vite   │
       └──────────┘

四、开发环境搭建——从零到可运行

理论讲完了，让我们动手。搭建 Vue 3 开发环境只需要三步。

4.1 安装 Node.js

Vue 3 的工具链依赖 Node.js 运行环境。前往 Node.js 官网下载 LTS（长期支持）版本，建议使用 Node.js 20（LTS 至 2026 年 4 月）或 Node.js 22（LTS 至 2027 年 4 月）。注意 Node.js 18 已于 2025 年 4 月 30 日停止维护（EOL），不建议在新项目中使用。

安装完成后，打开终端验证：

# 确认 Node.js 版本（推荐 >= 20）
node --version

# 确认 npm 版本
npm --version

如果两个命令都能正确输出版本号，说明环境已就绪。

4.2 使用 create-vue 创建项目

create-vue 是 Vue 官方提供的项目脚手架工具，基于 Vite 构建，替代了旧的 Vue CLI。执行以下命令：

# 创建新项目（weather-app 是项目名称，你可以自行替换）
npm create vue@latest weather-app

执行后，终端会出现一系列交互式选项：

✔ Add TypeScript?                    … Yes
✔ Add JSX Support?                   … No
✔ Add Vue Router?                    … Yes
✔ Add Pinia for state management?    … Yes
✔ Add Vitest for Unit Testing?       … No
✔ Add an End-to-End Testing Solution … No
✔ Add ESLint for code quality?       … Yes
✔ Add Prettier for code formatting?  … Yes

对于我们的天气应用示例，选择 TypeScript、Vue Router、Pinia 和 ESLint + Prettier 即可。

然后进入项目目录，安装依赖并启动：

cd weather-app
npm install
npm run dev

终端会提示开发服务器地址（通常是 http://localhost:5173），在浏览器中打开即可看到 Vue 3 的欢迎页面。

4.3 项目结构解析

create-vue 生成的项目结构如下：

weather-app/
├── node_modules/          # 第三方依赖（自动生成，不纳入版本控制）
├── public/
│   └── favicon.ico        # 网站图标
├── src/
│   ├── assets/            # 静态资源（图片、全局样式等）
│   ├── components/        # 可复用组件
│   ├── router/
│   │   └── index.ts       # 路由配置
│   ├── stores/
│   │   └── counter.ts     # Pinia 状态仓库示例
│   ├── views/             # 页面级组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 应用入口文件
├── index.html             # HTML 模板（Vite 的入口）
├── package.json           # 项目配置与依赖声明
├── tsconfig.json          # TypeScript 配置
├── vite.config.ts         # Vite 构建配置
└── eslint.config.js       # ESLint 代码规范配置

几个关键文件的作用：

index.html：Vite 以它为入口，通过 <script type="module" src="/src/main.ts"> 加载应用
src/main.ts：创建 Vue 应用实例，挂载插件（Router、Pinia），并挂载到 DOM
src/App.vue：应用的根组件，所有页面都在它内部渲染
vite.config.ts：构建工具的配置，可以在这里设置端口、代理、插件等

🤔 思考题：为什么 Vite 选择用 index.html 而不是 JavaScript 文件作为构建入口？这与 Webpack 的 entry 配置有什么本质区别？

五、第一个 Vue 3 应用——从模板到响应式数据

现在让我们抛开脚手架生成的模板代码，从零写一个最简单的天气信息展示应用，理解 Vue 3 的基本工作方式。

5.1 CDN 方式快速体验

如果只是想快速验证一个想法，可以直接通过 CDN 引入 Vue 3，无需任何构建工具：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>天气速览</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; }
    .card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; max-width: 360px; }
    .temp { font-size: 3rem; font-weight: bold; color: #2196f3; }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <div class="card">
      <h2>{{ cityLabel }}</h2>
      <p class="temp">{{ weather.degree }}°C</p>
      <p>天气状况：{{ weather.condition }}</p>
      <p>湿度：{{ weather.humidity }}%</p>
      <button @click="switchCity">切换城市</button>
    </div>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref, reactive, computed } = Vue

    const WeatherApp = {
      setup() {
        const cities = ['北京', '上海', '广州', '深圳']
        const currentIndex = ref(0)

        const weather = reactive({
          degree: 22,
          condition: '晴',
          humidity: 45
        })

        const cityLabel = computed(() => `📍 ${cities[currentIndex.value]}`)

        function switchCity() {
          currentIndex.value = (currentIndex.value + 1) % cities.length
          // 模拟不同城市的天气数据
          weather.degree = Math.floor(Math.random() * 20) + 10
          weather.humidity = Math.floor(Math.random() * 60) + 30
          const conditions = ['晴', '多云', '小雨', '阴']
          weather.condition = conditions[Math.floor(Math.random() * conditions.length)]
        }

        return { cityLabel, weather, switchCity }
      }
    }

    createApp(WeatherApp).mount('#app')
  </script>
</body>
</html>

保存为 HTML 文件，直接在浏览器中打开，你会看到一张天气卡片。点击”切换城市”按钮，数据会自动更新——你没有手动操作任何 DOM 元素，这就是 Vue 响应式系统的魅力。

5.2 在工程化项目中编写组件

回到我们用 create-vue 创建的项目，打开 src/App.vue，替换为以下内容：

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

// 响应式数据：城市列表与当前索引
const cityList = ['北京', '上海', '广州', '深圳']
const activeIndex = ref(0)

// reactive 用于创建响应式对象
const forecast = reactive({
  temperature: 22,
  description: '晴间多云',
  windSpeed: 12
})

// computed 用于派生计算属性
const activeCityName = computed(() => cityList[activeIndex.value])

// 方法：切换到下一个城市
function handleCityChange() {
  activeIndex.value = (activeIndex.value + 1) % cityList.length
  forecast.temperature = Math.floor(Math.random() * 25) + 5
  forecast.windSpeed = Math.floor(Math.random() * 30) + 3

  const descriptions = ['晴间多云', '阵雨转晴', '大风降温', '雾霾']
  forecast.description = descriptions[Math.floor(Math.random() * descriptions.length)]
}
</script>

<template>
  <main>
    <h1>天气预报</h1>
    <section class="weather-card">
      <h2>{{ activeCityName }}</h2>
      <p class="highlight">{{ forecast.temperature }}°C</p>
      <p>{{ forecast.description }} | 风速 {{ forecast.windSpeed }} km/h</p>
      <button @click="handleCityChange">下一个城市</button>
    </section>
  </main>
</template>

<style scoped>
main {
  max-width: 480px;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
}
.weather-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.highlight {
  font-size: 3rem;
  font-weight: 700;
  color: #1976d2;
}
button {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 6px;
  background: #1976d2;
  color: white;
  cursor: pointer;
  font-size: 1rem;
}
button:hover {
  background: #1565c0;
}
</style>

5.3 关键概念解读

通过上面的代码，我们接触到了 Vue 3 最核心的几个概念：

ref 与 reactive：两种创建响应式数据的方式。ref 可以接受任意类型的值（基本类型或对象），访问和修改时需要通过 .value；reactive 专用于对象和数组，可以直接读写属性。在实践中，ref 常用于基本类型值，而 reactive 常用于复杂对象结构。在模板中，ref 的 .value 会被自动解包，无需手动添加。

computed：计算属性，基于其依赖的响应式数据自动缓存和更新。只有当依赖变化时才会重新计算，比在模板中直接写表达式更高效。

<script setup>：Vue 3.2 引入的编译时语法糖，让组合式 API 的使用更加简洁。在 <script setup> 中声明的变量和函数会自动暴露给模板，无需手动 return。

scoped 样式：<style scoped> 中的 CSS 只会作用于当前组件，不会泄漏到其他组件——Vue 通过给 DOM 元素添加唯一属性选择器来实现这一点。

六、Vue 3 vs Vue 2——一次全方位的进化

如果你之前有 Vue 2 的使用经验，这一节将帮助你快速理解两个版本之间的核心差异。如果你是完全的新手，这一节可以帮你建立对 Vue 技术演进方向的认知。

6.1 API 风格：从选项到组合

Vue 2 的选项式 API 和 Vue 3 的组合式 API 是最显著的区别。我们用一个”书店库存管理”的例子来对比：

Vue 2 选项式 API 写法：

export default {
  data() {
    return {
      inventory: [],
      keyword: ''
    }
  },
  computed: {
    filteredBooks() {
      return this.inventory.filter(
        book => book.title.includes(this.keyword)
      )
    }
  },
  methods: {
    addBook(title, price) {
      this.inventory.push({ title, price, stock: 0 })
    },
    updateStock(index, delta) {
      this.inventory[index].stock += delta
    }
  },
  mounted() {
    this.loadInitialData()
  }
}

Vue 3 组合式 API 写法：

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// ---- 书籍库存管理功能 ----
const inventory = ref<Array<{ title: string; price: number; stock: number }>>([])
const keyword = ref('')

const filteredBooks = computed(() =>
  inventory.value.filter(book => book.title.includes(keyword.value))
)

function addBook(title: string, price: number) {
  inventory.value.push({ title, price, stock: 0 })
}

function updateStock(index: number, delta: number) {
  inventory.value[index].stock += delta
}

onMounted(() => {
  loadInitialData()
})
</script>

在这个简单例子中，两种写法差异不大。但当组件中同时存在库存管理、搜索过滤、购物车操作、用户权限检查等多个功能时，组合式 API 允许你将每个功能抽成独立的组合函数：

// composables/useBookInventory.ts
import { ref, computed } from 'vue'

export function useBookInventory() {
  const inventory = ref([])
  const keyword = ref('')

  const filteredBooks = computed(() =>
    inventory.value.filter(book => book.title.includes(keyword.value))
  )

  function addBook(title, price) {
    inventory.value.push({ title, price, stock: 0 })
  }

  function updateStock(index, delta) {
    inventory.value[index].stock += delta
  }

  return { inventory, keyword, filteredBooks, addBook, updateStock }
}

<script setup>
import { useBookInventory } from '@/composables/useBookInventory'
import { useShoppingCart } from '@/composables/useShoppingCart'

const { filteredBooks, keyword, addBook } = useBookInventory()
const { cartItems, addToCart, totalPrice } = useShoppingCart()
</script>

每个功能的逻辑内聚在各自的组合函数中，组件只负责”组装”——这就是组合式 API 名称的由来。

6.2 响应式机制的升级

对比项	Vue 2	Vue 3
底层 API	`Object.defineProperty`	`Proxy`
对象新增属性	需要 `Vue.set()`	自动响应
数组索引赋值	需要特殊处理	自动响应
初始化策略	递归遍历所有属性	惰性代理（访问时才递归）
支持的数据类型	Object / Array	Object / Array / Map / Set / WeakMap / WeakSet

6.3 性能提升

Vue 3 在编译时和运行时都做了大量优化：

静态提升（Static Hoisting）：模板中的静态节点只创建一次，后续渲染直接复用，不参与 diff
补丁标记（PatchFlags）：编译器为动态节点标记变化类型（文本、class、style 等），运行时只比较标记过的部分，实现”靶向更新”
块级树（Block Tree）：将模板按动态节点的分布划分为块，diff 时跳过整个静态子树
Tree-shaking：未使用的功能不会被打包，最终产物更精简

综合这些优化，Vue 官方称 Vue 3 的渲染性能比 Vue 2 提升了 最高 2 倍（up to 2x faster），实际提升幅度因场景而异。

6.4 TypeScript 支持

Vue 2 的 TypeScript 支持主要依赖社区方案（如 vue-class-component），类型推断并不完善。Vue 3 从一开始就用 TypeScript 重写了整个代码库，提供了：

完整的组件 props 类型推断
defineProps / defineEmits 编译时宏，支持纯类型声明
模板中的类型检查（配合 Vue Language Tools / Volar）
组合式 API 天然适合 TypeScript 的函数式类型推导

6.5 应用创建方式的变化

// Vue 2：通过 new 构造函数创建实例
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// Vue 3：通过工厂函数创建应用实例
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

Vue 3 使用 createApp 工厂函数替代了 new Vue()，这样做的好处是每次调用都返回一个独立的应用实例，避免了 Vue 2 中全局配置被多个实例共享导致的污染问题。

6.6 快速对照表

维度	Vue 2	Vue 3
API 风格	Options API	Composition API（兼容 Options API）
响应式	`Object.defineProperty`	`Proxy`
创建实例	`new Vue()`	`createApp()`
状态管理	Vuex	Pinia（官方推荐）
构建工具	Vue CLI (Webpack)	create-vue (Vite)
TypeScript	社区支持	原生支持
Fragment	不支持（模板需单一根节点）	支持（模板可多根节点）
生命周期	`beforeCreate / created`	`setup()` 替代
异步组件	`() => import('...')`	`defineAsyncComponent()`

本章小结

本章我们从一个框架选型的视角出发，系统性地认识了 Vue 3：

Vue 3 的渐进式理念 让你按需引入功能，既适合小型项目快速启动，也能支撑大型应用持续演进
四大核心升级——组合式 API、Proxy 响应式、Tree-shaking、Teleport/Suspense——从开发体验和运行性能两个维度带来了质的飞跃
成熟的生态系统——Vue Router、Pinia、Vite、Nuxt、丰富的 UI 库——让你不必重复造轮子
开发环境搭建只需 Node.js + npm create vue@latest 两步，几分钟即可开始编码
通过天气应用的实例，我们理解了 ref、reactive、computed、<script setup> 的基本用法
Vue 3 vs Vue 2 的全面对比，帮助你理解技术演进的方向和迁移的关键点

📝 自测练习

1. Vue 3 被称为”渐进式框架”，以下哪项最准确地描述了这一特性？

A. Vue 3 的版本号是渐进递增的

B. 你可以只引入核心库，再按需添加路由、状态管理等功能

C. Vue 3 只能用于渐进式 Web 应用（PWA）

D. Vue 3 需要从 Vue 2 逐步升级才能使用

2. Vue 3 的响应式系统使用 Proxy 替代了 Vue 2 的 Object.defineProperty，以下哪项不是 Proxy 带来的优势？

A. 可以检测对象属性的新增和删除

B. 支持数组索引的直接赋值

C. 自动支持所有浏览器，无需 polyfill

D. 采用惰性劫持，初始化性能更好

3. 在 Vue 3 中，ref 和 reactive 的区别是什么？请说明各自适用的场景。

4. 以下代码有一处常见错误，请找出并修正：
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count++
}
</script>
<template>
  <button @click="increment">{{ count }}</button>
</template>
5. 请简述 Composition API 相比 Options API，在大型项目中的两个核心优势。

参考答案提示：

B

C（Proxy 不支持 IE 浏览器，Vue 3 也因此放弃了对 IE 的支持）

ref 可接受任意类型，实践中常用于基本类型（string / number / boolean），访问需 .value；reactive 适合对象和数组，直接读写属性

count++ 应改为 count.value++（ref 在 JS 中需通过 .value 访问）

逻辑内聚（同一功能的代码集中在一起）和逻辑复用（可提取为可复用的 composable 函数）

下一章预告：环境搭好了，Vue 3 也跑起来了，下一章我们将用一个在线商城项目贯穿始终，系统学习模板语法与响应式基础——从插值表达式到指令系统，从 ref/reactive 到 computed 和 watch，让数据真正在页面上”活”起来。