这期vue3 教程，有如下特点
- 代码规范
- 使用TypeScript
- 代码风格使用全新组合式API
- setup语法糖
- vue3兼容vue2语法，使用vue3新语法，不用vue2语法
- 核心语法
- ref
- reactive
- computed
- watch
- 生命周...
- 常用功能组件
- hooks
- 自定义ref
- 路由
- pinia
- mitt
- 面试设计到的问答
- 组件通信
- 响应式相关api
- .......
Vue3简介
自20209月18日发布vue.js版本，代号One piece（海贼王），经历多次代码提交，有以下新特性。
1、性能提升很多
- 打包体积较少41%
- 初次渲染快55%，更新渲染快133%
- 内存较少55%
2、源码升级
- 使用Proxy代替defineProperty实现响应式
- 重写虚拟DOM的视线和Tree-Shaking
3、全面支持TypeScript
vue3非常完美支持TypeScript
4、vue3拥有新特性
- Composition API（组合api）
- 新内置组件 Fragment/Teleport/Suspense
- 新的生命周期钩子
- data选项应始终被声明为一个函数
- 移除keyCode支持作为v-on的修饰符
创建Vue3工程
传统安装方式，建议使用第二种官方推荐的方式创建
- 使用vue-cli脚手架创建，基于webpack
# 查看vue版本
vue --version
#提示不存在执行下面命令安装
# 安装或者升级@vue/cli
# 执行创建命令
npm run install -g @vue-cli
# 执行创建工程
vue create test01
# 随后选择vue版本，选择3.x
# Choose a version of Vue.js that you want to start the project with (Use arrowkeys）
# >3.x
## 2.x
# 启动工程
npm run start
- 官方推荐基于vite创建工程
vite是新一代前端构建工具，官网地址：vitejs.cn，
vite的优势如下:
- 轻量快速的热重载（HR）能实现极速的服务启动
- 对TypeScript、JSX、CSS等支持开箱即用。
- 真正的按需编译，不再等待整个应用编译完成 创建工程： 创建工程需要安装nodejs环境,下载地址。
npm create vue@latest
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
cd <your-project-name>
npm install
npm run dev
具体操作如下图：
在浏览器访问地址如下，即成功运行
至此创建一个hello-wolrd项目完成。
下一篇使用vscode搭建开发环境及hello-world项目结构分析。
