明天，葡萄带你理解如何基于Vite+Vue3实现一套纯前端在线表格零碎。
在正式开始我的项目介绍之前，首先咱们首先来介绍一下Vite和Vue3。
Vue3
Vue是什么？大多前端开发者对这个词已毫不生疏了。三大框架孰优孰劣，泛滥开发者畅所欲言，其中Vue以其“最简略、最易上手“的名号迅速积攒了一大批粉丝，被宽泛学习利用。
同Angular、React框架一样，Vue也是MVVM类型的框架，即数据驱动视图，在开发时咱们只须要关注数据的变动即可。不同的是，Vue是一个更轻量级的框架，被设计为自底向上逐层利用，其外围库只聚焦于视图层， 通过尽可能简略的API实现了响应式数据绑定以及组合的视图组件。
Vue曾经如此优良，为什么还须要Vue3呢？
这就要提到它的不足之处了，在之前的Vue2中，应用的是选项型API（Options API），将代码宰割为不同的属性：data、computed、methods 等，这些办法属性各司其职。
选项型API诚然好学易上手，与此同时也带来了一个关键问题：代码凌乱，可读性差。
举个例子，当初咱们想做一个列表视图性能，那么须要在data中写上相干的变量，在methods中将相干的逻辑判断和后端交互也加上。这个时候，新需要来了：增加上搜寻和筛选性能。没有问题，持续将新的变量沉积在data中，将新的办法整顿在methods中……写代码一时爽，前期保护的程序员傻眼了，这一堆堆的办法，到底在讲个啥。
既然Vue2这个弊病曾经裸露进去了，天然要在它的升级版尝试解决了。所以Vue3推出了组合式API（Composition API），正是为了解决本来Vue2我的项目中代码逻辑扩散、不易了解和保护的问题。它应用办法（function）进行代码宰割，使代码更为简洁易读。
既然做了，其余方面也不能落下啊！在性能下面，Vue3也对diff算法进行了优化：
在Vue2中，每当数据发生变化，就会生成一个新的DOM树，并新DOM树与旧的DOM树进行比照，来判断节点异同，并进行更新。但残缺遍历过程须要将两棵树所有节点进行比拟，但理论状况中并不是所有节点内容都会变动，这就造成了性能的节约。
Vue3新增了动态标记，仅对标记了的节点进行比照并进一步更新，无需再遍历整个节点，实现了性能晋升。
比照Vue2，官网文档对Vue性能有具体的数据介绍：SSR速度进步了2~3倍；Update性能进步1.3~2倍。（程序员看到后更有信念学习了！）
除此之外，Vue我的项目中也有泛滥API和模块，但在理论我的项目中咱们并不会用到所有的内容，Vue3对此推出按需打包模块，能够大幅压缩打包后的内容体积。
依据官网比照示例，Vue2中如果仅写了Hello Word，未用到任何模块API，打包后大小约为32KB；而Vue3同理，打包后大小约为13.5KB，能够显著看出降级后的Vue3相较于Vue2打包体积大幅减小。
与Vue2相比，Vue3中生命周期函数也产生了变更，总结如下：
有须要的同学能够截图保留，以备不时之需。
说完了Vue3，接下来咱们来看看Vite又有什么亮眼之处。
Vite
在Vue3正式公布之前，尤雨溪就提到做了一个新的前端构建工具-Vite。其自己更是对Vite青睐有加，引得Webpack开发者直喊大哥。
Vite到底有什么样的神奇作用呢？它做到了本地疾速开发启动：
- 不须要期待打包操作，疾速冷启动
- 即时的模块热更新
- 无需期待整个我的项目编译实现，做到真正的按需编译
在应用Webpack时，会经验剖析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说，须要先打包，之后将打包后果提供给服务器进行加载。而随着模块的一直增多，打包的体积会越来越大，造成热更新速度显著拖慢。
而Vite间接略过了打包步骤，间接启动开发服务器，在申请具体的模块时再对该模块进行实时编译，大大提高了启动速度。
到这里咱们曾经具体为大家介绍了Vue3降级的亮眼性能和Vite的劣势，在下局部中咱们会以我的项目实例登程，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格零碎。
感兴趣的小伙伴们不要错过~