快速上手
简介
- 2020年9月18日,Vue.js发布3.0版本
优势
1.性能提升
打包速度减少41%
初次渲染快55%,更新渲染快133%
-
内存减少54%
……
2.源码提升
使用Proxy代替difineProperty实现响应式
-
重写虚拟DOM的实现和Tree-Shaking
……
3.拥抱TypeScript
- 更好的支持TypeScript
4.新特性(重点)
-
Composltion API(组合API)
setup配置
ref与reactive
watch与watchEffect
provide与inject
……
-
新内置组件
Fragment
Teleport
Suspense
-
其他改变
新生命周期钩子
data选项应始终被声明为一个函数
溢出keyCode支持作为v-on的修饰符
……
创建Vue3.0工程
使用vue-cli创建
官方文档:https://cn.vuejs.org/guide/quick-start.html
## 安装@vue/cli版本,确保其在4.5.0版本以上
vue -V 或 vue --version // 查看当前版本
## 安装或升级版本
npm install -g @vue/cli
## 创建
vue create vuetest
## 启动
cd vuetest
npm run serve
使用vite创建
vite官网:https://vitejs.cn/
vite:新一代前端构建工具
-
优势
开发环境中,无需打包操作,可快速冷启动
轻量快速的热重载(HMR)
按需编译,不再等待整个应用编译往出
传统构建与vite构建对比
## 创建工程
npm create vite@latest <项目名称> -- --template vue
## 进入工程目录
cd <项目名称>
## 安装依赖
npm install
## 运行项目
npm run dev