文章简介： 

（1）简介：

在 Vue3 中编码规范如下：

• 编码语言: JavaScript
• 代码风格: 组合式API选项式、API
• 简写形式: setup语法糖

 

（2）复习内容： 

1.核心: ref、reactive、computed、watch、生命周期

2.常用: hooks、自定义ref、路由、pinia、mitt···

3.面试: 组件通信、响应式相关API.

---

1.Vue3简介

2020年9月18日，Vue.js 发布版3.0版本，代号: Onepiece(海贼王)
经历了: 4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址: Release v3.0.0 One Piece·vuejs/core
截止2023年10月，最新的公开版本为: 3.3.4

1.1.性能的提升

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

1.2. 源码的升级

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

1.3.拥抱TypeScript

• Vue3 可以更好的支持 Typescript

 1.4.新的特性
（1）Cqmposition API (组合 API )

• setup
• ref与reactive
• computed与watch

（2）新的内置组件:

• Fragment
• Teleport
• Suspense

（3）其他改变：

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

 

---

2.创建Vue3工程

 2.1. 基于 vue-cli 创建
备注:目前 vue-cli 已处于维护模式，官方推荐基于 Vite 创建项目。

 

2.2. 基于 vite 创建 (🌟推荐)

vite 是新一代前端构建工具，官网地址:https://vitejs.cn，vite的优势如下: 

轻量快速的热重载( HMR )能实现极速的服务启动。
对 Typescript、JSX、css 等支持开箱即用.
真正的按需编译，，不再等待整个应用编译完成。
webpack 构建与 vite 构建对比图如下: