前言
最近一直忙于公司项目的vue3重构，对vue3有了一定的实践。从开始关注vue3到现在也有一段时间了，加上最近的实践也有一定的心得了，目前vue3生态以及周边插件已经很完善了，是时候开始学起来了。
vue3对比vue2的优势
按照官方的说法，vue的重写其实要解决下面的问题：
- 使用新语言特性，其中包含了Proxy。Proxy拥有比defineProperty更加强大的功能
- 解决体系架构存在的问题，比如：Vue2 中使用模版编译器的编写方式使得正确的源映射支持非常具有挑战性
- Vue2 内部存在一些隐式的耦合，这会对代码库的修改带来更大的难度和隐患
另外，除了使用Ts作为vue3的设计语言以外，性能方面也是大大优于vue2的，具体表现在：
- 速度更快，Vue3的performance比vue2的快1.2~2倍
- 体积更小，Vue3的tree Shaking按需编译，让打包后的体积比Vue2更小
- 组合API，Vue3的composition API（类似于react的hook，仅仅是类似）使我们的代码更加灵活清晰，这也解决了上面提到的“源映射支持困难”的问题
Vue3在性能方面的提升
当我门在谈到Vue3优化点的时候，多数人都会说到上面几点介绍的几个点，然而，很多人并不能明确的说出为什么速度更快，在速度方面Vue3做了哪些设计，为什么体积更小，Tree Shaking到底是如何工作的。知其然更要知其所以然，因为人云亦云，并不会让你变得更优秀，只会变得更加随大流。 限于文章篇幅问题，这节内容，将在下一篇文章“Vue3性能提升分析”中单独去说。
使用vite初始化项目
vite是Vue作者的另一力作，Vue3使用vite作为构建工具而不是webpack，作者的意图是用vite取代webpack成为下一代开发构建工具。由于其支持原生ES模块导入方法，所以他允许快速提供代码，是的开发效率大大提高。
他有三个特点：
- 快速热启动
- 即时的热模块更新
- 真正的按需编译
快速的冷启动，其实市面上也有类似的解决方案如 Vue CLI、create-react-app、umi 等等诸如此类快速启动工具。热更新也有相应的 webpack-dev-server 解决方案。但是按需编译需要我们自行在代码中使用 import 语法实现。
Vite 的按需编译按照尤雨溪的微博原话是这样解释的：
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。
使用Vite
可以全局安装vite
npm install -g create-vite-app
使用vite创建项目
create-vite-app <producName>
当然，我个人不喜欢使用全局安装的方式,
yarn create vite-app <produceName>
创建项目完成之后，可以通过如下命令启动：
cd <productName>
npm install 或 yarn
npm run dev 或 yarn dev
跟vue-cli项目有所区别的是，配置文件变成了vie.comfig.js
总结
本文主要介绍了Vue3的一些特点，以及使用Vite初始化项目的方法，在接下来的文章当中，将介绍Vue3在项目的使用，以及使用过程中踩过的一些坑。
