一、Vue3快速上手

（一）Vue3 简介

• 2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王）
• 耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
• GitHub 上的 tags 地址

（二）Vue3 带来了什么

1.性能的提升

• 打包大小减少 41%
• 初次渲染快 55%，更新渲染快 133%
• 内存减少 54%
• ......

2.源码的升级

• 使用 Proxy 代替 defineProperty 实现响应式
• 重写虚拟 DOM 的实现和 Tree-Shaking
• ......

3.拥抱 TypeScript

• Vue3 可以更好地支持 TypeScript

4.新的特性

1）Composition API（组合 API）

• setup 配置
• ref 与 reactive
• watch 与 watchEffect
• provide 与 inject
• ......

2）新的内置组件

• Fragment
• Teleport
• Suspense

3）其它改变

• 新的生命周期钩子
• data 选项应始终被声明为一个函数
• 移除 keyCode 支持作为 v-on 的修饰符
• ......

（三）创建 Vue3.0 工程

1.使用 vue-cli 创建

相关信息

截至 2022 年 09 月 08 日已处于维护模式

官方推荐使用 Vite 创建 Vue3 项目

官方文档

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

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

# 创建
vue create vue3_test

# 启动
cd vue3_test
npm run serve

2.使用 Vite 创建

• 官方文档
• Vite 官网
  • 什么是 vite？——新一代前端构建工具
  • 优势：
    • 开发环境中，无需打包操作，可快速的冷启动
    • 轻量快速的热重载（HMR）
    • 真正的按需编译，不再等待整个应用编译完成
  • 传统构建与 vite 构建对比图

# 创建工程
npm init vite-app <project-name>

# 进入工程目录
cd <project-name>

# 安装依赖
npm install

# 运行
npm run dev