前言

以下文章是我个人学习的输出方式，目的是为了夯实自己的技术基础。

一. 简介

Vue 3 是 Vue.js 的最新版本，它是一个用于构建用户界面的渐进式 JavaScript 框架。以下是 Vue 3 的一些主要特点和改进：

1. 性能提升

Vue 3 在性能方面进行了显著优化，使得应用程序运行速度更快，内存使用更少。这主要得益于虚拟 DOM 的改进和编译时优化。

2. 组合式 API (Composition API)

Composition API 提供了一种新的方式来组织和复用代码，通过 setup 函数和其他钩子函数，更方便地组合逻辑。相比于 Vue 2 的选项式 API，组合式 API 更加灵活和可组合。

3. 更好的 TypeScript 支持

Vue 3 原生支持 TypeScript，提供了更好的类型推断和类型检查，使得开发过程更加可靠和高效。

4. 基于 Proxy 的响应式系统

Vue 3 使用 Proxy 代替 Vue 2 中的 Object.defineProperty 来实现响应式系统。这带来了更好的性能和更简洁的代码，同时解决了一些 Vue 2 中的局限性，比如对数组和对象属性的处理。

5. 新的组件生命周期钩子

Vue 3 引入了一些新的生命周期钩子，比如 onMounted、onUnmounted 等，使得开发者可以更细粒度地控制组件的生命周期。

二. 项目创建

1. 基于 vite 创建（推荐）

## 创建命令
$ pnpm create vue@latest

## 具体配置
√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

## 启动
cd vue-project
pnpm install
pnpm dev

2. 基于 vue-cli 创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue-test

## 启动
cd vue-test
npm run serve