Vue3快速上手

一、认识Vue

1.了解相关信息

• vue3 2020年9月发布
• 开发两年多
• vue3支持vue2大多数特性
• 更好地支持ts

2.性能提升

• 打包大小减少41%
• 初次渲染快55% 更新渲染快133%
• 内存减少54%
• 使用proxy代替defineProperty实现数据响应式
• 重写虚拟DOM的实现和Tree-Shaking

3.新增特性

• Composition(组合)API
• setup
  1. ref和reactive
  2.computed和watch
  3.新的生命周期函数
  4.provide和inject
  ...
• 新组件
  1.Fragment-文档碎片
  2.Teleport-瞬移组件的位置
  3.Suspense-异步加载组件的loading界面
• 其他API更新
  1.全局API的修改
  2.将原来的全局API转移到应用对象
  3.模板语法变化

二、快速上手

1.使用 vue-cli 创建

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

2.vite创建

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

• vite是一个由原生ESM驱动的WEB开发构建工具。在开发环境下基于浏览器原生ES imports开发
• 做到 本地快速开发启动 在生产环境下基于rollup打包
  「
     快速冷启动，不需要等待打包操作
     即时的热模块更新， 替换性能和模块数量的解构让更新飞起
     真正的按需编译，不再等待整个应用编译完成
  」