如何开发一款基于 Vite+Vue3 的在线表格系统（上）

今天，葡萄带你了解如何基于 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 的在线表格系统。感兴趣的小伙伴们不要错过~