简要概述

Vue 3 引入了多项重大的改进，核心新特性包括 Composition API 和性能优化等，同时还有其他的增强功能。

Composition API

解决的问题

• Vue 2 中的 Options API 在复杂组件中会导致逻辑分散（如数据、方法、生命周期分散在不同的选项中），难以维护。
• Composition API 通过逻辑组合（而非选项分割）提高代码的可读性和复用性。

核心特性

• setup() 函数

  • 组件的入口函数，在 beforeCreate 之前调用，替代了 data、method 等选项。
  • 返回的对象会暴露给模板和其他选项。

  setup() {
     const count = ref(0);
     const increment = () => count.value++;
     return { count, increment };
  }

• 响应式 API

  • ref：包装基本类型为响应式对象（通过 .value 访问）。
  • reactive：将对象转换为响应式对象，支持深层响应式，适合复杂对象。
  • toRefs：将响应式对象转换为普通对象的引用，便于解构（即将 reactive 对象结构为多个 ref）。

  const state = reactive({ name: "Vue" });
  const { name } = toRefs(state); // 解构后仍响应式

• 生命周期钩子

  • 以 onX 形式在 setup 中使用（如 onMounted、onUpdated）。

  onMounted(() => console.log("组件已挂载"));

• 逻辑复用

  • 自定义 Hooks（类似 React Hooks），可跨组件共享：

  // useCounter.js
  export function useCounter() {
     const count = ref(0);
     const increment = () => count.value++;
     return { count, increment };
  }
  
  // 在组件中使用
  import { useCounter } from "./useCounter";
  export default {
     setup() {
        const { count, increment } = useCounter();
        return { count, increment };
     },
  };

性能优化

响应式系统改进

• 基于 Proxy 的响应式

  • Vue 2 使用 Object.defineProperty，需要递归遍历对象且无法监听新增属性。
  • Vue 3 使用 Proxy，支持动态属性增删和数组索引修改，性能更高。

  const obj = reactive({ a: 1 });
  obj.b = 2; // Vue 2 无法检测，Vue 3 可以

• 惰性响应式

  • 只有被使用的属性才会被追踪，减少不必要的依赖收集。

编译时优化

• 静态树提升（Static Tree Hoisting）
  • 模板中的静态节点会被提升为常量，避免重复渲染。
• Patch Flag 标记
  • 动态节点在 Diff 算法中通过标志位（如 1 表示文本未变化）跳过静态比较。
• SSR 优化
  • 服务端渲染支持更高效的组件 hydration（激活交互）。

体积减少

• Tree-shaking 支持
  • 未使用的 API（如 v-model 修饰符）不会打包到生产环境中。
  • 核心库体积从 Vue 2 的 20KB 减少到 Vue 3 的 10KB（gzip 压缩后）。

其他重要特性

Fragment（片段）

组件模板支持多个根节点，无需额外包裹 <div>。

<template>
    <header></header>
    <main></main>
    <footer></footer>
</template>

Teleport（传送门）

将组件渲染到 DOM 的任意位置（如模态框、通知栏）。

<teleport to="body">
    <div class="modal">内容</div>
</teleport>

Suspense（异步组件）

优雅处理异步组件加载状态。

<Suspense>
    <template #default>
        <AsyncComponent/>
    </template>
    <template #fallback>Loading...</template>
</Suspense>

更好的 TypeScript 支持

• Vue 3 源码用 TypeScript 重写，提供完整的类型定义。
• Composition API 天然适合类型推导。

对比 Vue 2 的改进总结

特性	Vue 2	Vue 3
响应式系统	Object.defineProperty	Proxy
API 设计	Options API	Composition API + Options API 兼容
性能	较慢的虚拟 DOM Diff	优化的编译时 + Patch Flag
体积	较大	Tree-shaking 支持更小体积
TypeScript	支持有限	原生支持

开发环境搭建（Vite 或 Vue CLI）

使用 Vite 搭建 Vue 3 项目

特点

• 极速启动：基于原生 ES Module，冷启动时间秒级。
• 按需编译：无需打包整个项目，开发体验流畅。
• 轻量高效：默认集成现代前端工具（如 Rollup）。

步骤

1. 安装 Node.js
   • 确保已安装 Node.js（建议 LTS 版本 ≥ 16.0）。
2. 创建项目 运行以下命令（选择 vue 模板）：

   npm create vite@latest my-vue-app --template vue

   或使用 Yarn：

   yarn create vite my-vue-app --template vue

3. 安装依赖

   cd my-vue-app
   npm install  # 或 yarn

4. 启动开发服务器

   npm run dev  # 默认访问 http://localhost:5173

5. 项目结构

   my-vue-app/
   ├── public/          # 静态资源
   ├── src/
   │   ├── assets/      # 图片等资源
   │   ├── components/  # 组件
   │   ├── App.vue      # 根组件
   │   └── main.js      # 应用入口
   ├── vite.config.js   # Vite 配置
   └── package.json

6. 生产构建

   npm run build  # 生成 dist 目录

使用 Vue CLI 搭建 Vue 3 项目

特点

• 功能全面：集成 Webpack、Babel、ESLint 等。
• 成熟稳定：适合复杂项目配置。
• 图形化界面：支持通过 UI 管理项目。

步骤

1. 全局安装 Vue CLI

   npm install -g @vue/cli
   # 或 yarn global add @vue/cli

2. 创建项目

   vue create my-vue-app

   • 选择 Manually select features。
   • 勾选所需功能（如 Babel、Router、Vuex 等）。
   • 选择 Vue 3 版本。

3. 启动开发服务器

   cd my-vue-app
   npm run serve  # 默认访问 http://localhost:8080

4. 项目结构

   my-vue-app/
   ├── public/          # 静态资源
   ├── src/
   │   ├── assets/      # 图片等资源
   │   ├── components/  # 组件
   │   ├── views/       # 页面级组件（如使用 Router）
   │   ├── App.vue      # 根组件
   │   └── main.js      # 应用入口
   ├── babel.config.js  # Babel 配置
   ├── vue.config.js    # Webpack 配置（可选）
   └── package.json

5. 生产构建

   npm run build  # 生成 dist 目录

6. 图形化界面（可选）

   vue ui  # 打开浏览器管理项目

Vite vs Vue CLI 对比

特性	Vite	Vue CLI
构建工具	Rollup	Webpack
启动速度	极快（ES Module 按需编译）	较慢（全量打包）
配置复杂度	更轻量，配置简单	功能全面，配置复杂
HMR 热更新	瞬时更新	较快但需重建部分模块
适用场景	现代浏览器、快速原型开发	传统项目、需要深度定制 Webpack
TypeScript	原生支持	需额外配置