01 Vue3简介
介绍
性能的提升
-
打包大小减少
41%
-
初次渲染快
55%
, 更新渲染快133%
-
内存减少
54%
源码的升级
-
使用
Proxy
代替defineProperty
实现响应式 -
重写虚拟
DOM
的实现和Tree-Shaking
拥抱TypeScript
Vue3
可以更好的支持TypeScript
新的特性
1. 组合是API(Composition API)
setup
ref
和reactive
computed
和watch
...
2. 新的内置组件
Fragment
Teleport
Suspense
3. 其他改变
- 新的生命周期钩子
data
选项应始终被声明为一个函数- 移除
keyCode
支持作为v-on
的修饰符
创建Vue3
工程项目
【基于 vue-cli 创建】
点击查看官方文档
备注:目前
vue-cli
已处于维护模式,官方推荐基于Vite
创建项目。
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
或者 vue -
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve
基于 vite 创建】(推荐)
vite
是新一代前端构建工具,官网地址:https://vitejs.cn,vite
的优势如下:
- 轻量快速的热重载(
HMR
),能实现极速的服务启动。 - 对
TypeScript
、JSX
、CSS
等支持开箱即用。 - 真正的按需编译,不再等待整个应用编译完成。
webpack
构建 与vite
构建对比图如下:
具体操作如下(点击查看官方文档)
注意:已安装 18.0 或更高版本的 Node.js
## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No